I'm trying to simulate the v-model.lazy for my v-text-field due to performance constraints.
I tried this:
<v-text-field :value="p.name" #change="v => p.name = v" :data-vv-name="'name'+p.id" v-validate="'required|max:255'" :error-messages="errors.collect('form'+p.id+'.'+'name'+p.id)" :counter="255" :label="$t('property.name')" required maxlength="255" :data-vv-as="' '" v-else></v-text-field>
But I keep getting all the keydowns and input emits, which is provoking a big lag:
If I use an input with a v-model.lazy it works as expected, but I'm not able to achieve the same thing using the v-text-field.
Should I use a prevent.default for those events?
Adding data-vv-delay="1000" and :value="p.name" #change="v => p.name = v" instead of v-model improved a lot the lag. This will delay de validation of the field.
The real solution would require v-model.lazy to work on Vuetify's v-text-field, but it is not the case yet.
Related
I've created a small jsfiddle which explains the error and how to reproduce it here: https://jsfiddle.net/4Leu9a6x/57/
I have a select on which I use #change and :value to update and show the value. I know I could use v-model but my app is rather complex so this is the only way to do it currently.
The problems appears when I change the options dynamically. As soon as I change them the value of the select (the one the user sees) is not the same as the real value (saved in data by vue). Even though I do have :value.
I don't understand why it doesn't show a gray select (with nothing selected) when :value is not inside the options.
The jsfiddle above will clearly show this problem. Any ideas on how to keep the two in sync?
v-model has specific behavior to deal with the situation when a <select>'s options are changed dynamically. Since you're not using v-model, you'll have to deal with these issues yourself.
Like other input elements, a <select> has its own internal state (value and selectedIndex) that the browser maintains (not Vue). If you change the options without changing the value, then when Vue re-renders it won't set the value of the select since the value didn't change, so you're left with whatever state the browser chooses, and potentially the bound value will be out of sync with the actual value of the select.
A couple of solutions:
Bind key of the <select> to recreate the element when the options change (fiddle).
Wrap the <select> in a component and manually set the selectedIndex of the element to the index of the selected option. Read the v-model source to see how Vue does it.
When you change the options data, also change the value data so that it corresponds to an actual option. But this doesn't solve the problem of having the <select> select no option when the value doesn't match any option after changing the options but not the value.
Add this.val = this.options[0]; while running shuffle method. This is because each time the shuffle method runs it resets the options, since your value is not two way bound, the value is not being updated.
Else you can refractor your code and use v-model.
new Vue({
el: "#app",
data: {
val: 2,
options: [1, 2, 3, 4]
},
methods: {
shuffle() {
this.options = [Math.random(), Math.random(), Math.random()]
this.val = this.options[0];
}
}
})
I am trying to set rules to control buttons that are inside of v-text-area on Vue2/Vuetify. How can I do this?
I tried several things, please do not judge me i am beginner of coding concept
In order to use Vuetify validation rules, you need to wrap all elements on which you want to perform validation in a <v-form> element.
On your input components, you need to provide an array to the rules prop with the names of functions you define which perform validation.
The functions which validate take the value as an input and return true if the input is valid and false or a failure string if the input is invalid.
An example of such a function defined in the methods section would be:
isNumber(input) {
return /[0-9]+/g.test(input) || "input must be a number";
}
Passing it to your v-text-area would look like this:
<v-text-area :rules="[isNumber]" />
More info is available in the #rules section of Vueitfy's Form docs.
Is it possible somehow to update Vuetify v-combobox items as the user is typing? I want to change the list of available items depending on what the users started typing, to create an address input with suggestions from a geolocation API.
This is what I tried: #update:search-input='fetchAddresses'
And in fetchAddresses: this.items = newListOfItems
However, while #update:search-input fires as expected, the combobox list will only be updated after losing focus. Can I somehow trigger it to be updated? (This may very well be an X/Y problem, so any hints about other approaches are welcome)
My current, ugly, hack is to force the whole combobox component to re-render with the current value set, and then refocus on it. (There is an activateMenu() method on the combobox that I could use to make sure the list reopened:
this.$nextTick(() => {
if (this.$refs.addressCombobox) {
this.$refs.addressCombobox.focus()
this.$refs.addressCombobox.activateMenu()
}
})
I'm using Vue 2.
In my case no-filter solved this problem
<v-combobox no-filter ... >
I need to do a shortif in a v-model, but eslint gives the folowing problem:
[vue/valid-v-model] 'v-model' directives require the attribute value
which is valid as LHS.eslint-plugin-vue
so the code works. but its not the way it needs to work.
this is the code i have now
<v-text-field
v-show="field.type == 'String'"
v-model="_isMultiple(content_data[tabindex]) && subitem != null ? content_data[tabindex][subitem][field.name]
: content_data[tabindex][field.name]"
:label="field.name"
:counter="field.counter"
max-width="100px"
/>
So this code needs a little explanation to it.
I try to build this as an dynamic module. If I get an array back from my json response it needs to v-model the subitem. If I get an object back from the response it just needs to v-model that object.
The data (content_data[tabindex]) + field do i get from a v-for loop and other loops in my vue html
so I think its not an option to do a computed prop because
I can't get in the right data.
_isMultiple function code:
_isMultiple(content_data) {
return Array.isArray(content_data)
}
any solution for this?
Maybe you should not use v-model, but build it on your own with value binding and event listening.
v-model is only a shorthand: https://v2.vuejs.org/v2/guide/forms.html.
By implementing it on your own you can use a method to set the values and a computed property to get it.
In a functional test in symfony, sfTestBrowser provides methods
click() "Simulates a click on a link or button."
select() "Simulates selecting a checkbox or radiobutton."
and unselect().
But I have not found a way to simulate making a selection from a <select> element.
Does anybody know a way to do this?
This has troubled me too. I'm assuming you just want to set the value for form submission? If you know the value, you can of course just do
$browser->click('Save', array(
'theselectfield' => 'desired_value'
));
But usually I don't know the value I want posted, because it's from a database-driven select box. So my solution is
$theOption = $browser->getResponseDomCssSelector()->matchAll('select[name*=name_of_select_field] option:contains(TheOptionTextYouWant)')->getNode();
$browser->setField('theselectfield', $theOption->getAttribute('value'));
... or use $browser->click() instead ...
Frustrating because you have to break out of the $browser call chain, in order to use getResponseDomCssSelector(), but I haven't found an easier way.