I have vuetify v-textarea in my page and problem with maxlength in it. In web all is good, but on devices when I paste text inside textarea and then typing I pass over maxlength.
<v-textarea
id="typo-error-message"
v-model.trim="$v.message.$model"
:maxlength="1000"
:counter="1000"
:error-messages="$v.message.$error ? desriptionValidationErrorMsg : ''"
rows="1"
auto-grow
outlined
single-line
/>
I was trying to find something on the Internet and came across this codepen. However, it also does not work on devices and exceeds the maxlength.
https://codepen.io/katerlouis/pen/YzPNYoW
Related
I'm really lost on this one. This is my code:
<template>
<v-container>
<v-row>
<v-col cols='12'>
<v-text-field
label="This is a label"
single-line
solo
></v-text-field>
</v-col>
</v-row>
</v-container>
</template>
If I enter text into the field on desktop it's fine. Even viewing the browser through Chrome DevTools and using the PC keyboard works. But direct entry using the phone's keyboard does not. The text just gets overlayed on the label.
What's more interesting is that it focuses properly if you type a space or punctuation and then the letters.
And yes, that's all the code I have in the file haven't even added in export defaults yet
Using nuxt v2.12.2 and #nuxtjs/vuetify v1.11.2
EDIT: I've opened a GitHub issue here. If it doesn't get answered here you can always check the issue.
In my case the problem is due to vuetify version - v2.2.22 is the last one that is working properly. For now try downgrading your packages as per instructions in here (try experimenting with different package versions): https://forum.vuejs.org/t/how-to-update-vuetify-to-latest-version-in-nuxt-js/66326
The v-btn (vuetify) component is displayed differently if it has the "nuxt" attribute (to be used as a in the nuxt.js framework).
How to fix it?
The first image is the v-btn component without the "nuxt" (as it should display normally) and the second has the attribute.
<v-btn
class="enter-btn"
large
color="error"
:disabled="!agreed"
>
Accept and Enter
</v-btn>
<v-btn
class="enter-btn"
large
color="error"
:disabled="!agreed"
nuxt
to="/to/url"
>
Accept and Enter
</v-btn>
When the nuxt and to attributes are added, the element changes from <button ...> to <a href="/to/url" ... >.
Unfortunately adding the two code samples to a fresh project does not show the visual difference you have.
The <a> has an additional class v-btn--router, but it doesn't cause the width difference or text alignment issues.
You can debug a little by inspecting each element in the console, looking at the Styles pane and checking for any sources of style (on the RHS) other than Vuetify ones, which are VBtn.sass & VApp.sass.
Since width is one of the problem attributes, it is also worth while checking the width value in the Computed tab.
If it is being set directly by something, you can click it open to see the source of it's value (for example, height is set to 44px by classes .v-btn:not(.v-btn--round).v-size--large in the file VBtn.sass).
So I tried to implement this example for a v-badge from vuetify and it is simply not showing in the DOM:
<v-badge bordered color="error" icon="mdi-lock" overlap>
<v-btn class="white--text" color="error" depressed>
Lock Account
</v-btn>
</v-badge>
Then I compared the source code of the working example on the vuetify website with the compiled source code of my example:
Working example on vuetify website:
Not working example in my vue instance:
Notice the absence of the v-badge__wrapper span. Instead of that there is only an empty comment: <!---->
Any idea why? And how to fix this?
Might be vuetify version issue, please upgrade your vuetify version. I solved it also by just upgrading it.
I'm trying to make a toolbar using Vuetify for this text editor:
https://github.com/scrumpy/tiptap
My issue here is that TipTap has methods to check for editor status.
e.g. isActive.bold()
TipTap also uses commands to toggle status of formats commands.italic
While the button groups in Vuetify wants to have an array of values.
<v-btn-toggle multiple v-model="format">
<v-btn :value="1" #click="commands.bold">
<v-icon>mdi-format-bold</v-icon>
</v-btn>
<v-btn :value="2" #click="commands.italic">
<v-icon>mdi-format-italic</v-icon>
</v-btn>
<v-btn :value="3" #click="commands.strike">
<v-icon>mdi-format-strikethrough</v-icon>
</v-btn>
I'm coming up short on how to combine these two approaches.
I've tried to create a computed v-model field to bind the button group to and somehow compute the array to bind using the status methods.
The Vuetify button groups seems overly complicated to work with.
Just having a isPressed/Toggled/Checked prop on the button would have solved this a lot easier.
Thoughts here?
I have a Vue.js project (Nuxt.js) and as UI I use the Vuetify.
For e2e testing I use the Cypress.
Below is my scenarios of test in Cypress:
I have a problem while creating test for page where I use v-autocomplete component.
The problem is that I can't use Vuetify native classes to get the element I want to test.
below is an example with data-cy selector
<v-autocomplete
v-model="model"
:items="items"
item-text="Description"
item-value="API"
label="Public APIs"
placeholder="Start typing to Search"
data-cy="autocomplete"
></v-autocomplete>
I type some text into search input.
Then in v-autocomplete have been found search results.
And example of one of there is below:
...
<div>
<a class="v-list__tile v-list__tile--link theme--light">
<div class="v-list__tile__content">
<div class="v-list__tile__title">Result item
<span class="v-list__tile__mask">result item</span>
</div>
</div>
</a>
</div>
...
Then I want select one of search items by clicking to one of found results.
And for that I should to use native classes of Vuetify, but it is not have stability (.v-list__tile--link class сan be renamed by developers).
How I can add data-cy selector into result search html item?
Maybe who know any another way to resolve this problem?
I don't think v-list__tile--link can be changed by developers, it seems to be added at runtime DOM by the Vuetify library (unless you mean Vuetify developers, then sure it can change between versions).
In any case, if you want to be more content-oriented in your selectors, use Cypress .parent() selector
For example,
cy.contains('div', 'itemTextToSelect').parent('a').click()
If posssible make sure 'itemTextToSelect' is really distinctive (if you can set it in the test fixture).
BTW, before the user starts typing the autocomplete list is display: none, so you will need to either .type('something') into the input, or .click({force: true}) the item.