Если я в text-field введу значение, то v-model автоматически реактивно обновится. Как изменить v-model только после определенного сабмита?
<v-text-field label="Название" :value="item.name" v-model="item.name"></v-text-field>
new Vue({
el: '#app',
data: {
valid: null,
item: { name: '' },
nameInput: '',
nameRules: [
v => !!v || 'Не может быть пустым',
v => /(foo|bar|baz)$/i.test(v || '') || 'Должно заканчиваться на foo, bar, или baz'
]
},
vuetify: new Vuetify(),
});
<link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-form v-model="valid">
<v-text-field label="Название" v-model.trim="nameInput"
:rules="nameRules" autofocus autocomplete="off"
@input.native="valid && (item.name = nameInput)"
></v-text-field>
</v-form>
<v-sheet elevation="1" class="my-4 pa-4">
Текущее значение: '{{ item.name }}'
</v-sheet>
</v-container>
</v-content>
</v-app>
</div>
submit
(или то же самое input
) на форме.
v-text-field
- это кастомный компонент библиотеки. Поэтому там на событиеinput
приходят не такие данные, как при браузерномinput
. Сvuetify
я не работаю, поэтому точно подсказать не могу. Но могу сказать, что обычно, в метод перемення$event
передается первой