1

Если я в text-field введу значение, то v-model автоматически реактивно обновится. Как изменить v-model только после определенного сабмита?

<v-text-field label="Название" :value="item.name" v-model="item.name"></v-text-field>
7
  • К примеру в вышеуказанном коде идёт жесткая привязка к item.name, то бишь после изменения input value, item.name изменится во всем документе. А мне нужно изменять item.name например в том же методе, методы я сам напишу, меня интересует именно логика работы подобного механизма
    – VueBeginer
    19 дек 2019 в 10:26
  • ru.vuejs.org/v2/guide/…
    – Dmytro
    19 дек 2019 в 10:36
  • Зря удалили комментарий, это почти то что нужно) оформите пожалуйста ответ, выберу правильным
    – VueBeginer
    19 дек 2019 в 10:43
  • Подскажите ещё, правильно ли я передал $event.target.value в функцию? change_client_value(item.name, $event.target.value)
    – VueBeginer
    19 дек 2019 в 10:43
  • v-text-field - это кастомный компонент библиотеки. Поэтому там на событие input приходят не такие данные, как при браузерном input. С vuetify я не работаю, поэтому точно подсказать не могу. Но могу сказать, что обычно, в метод перемення $event передается первой
    – Dmytro
    19 дек 2019 в 10:46

1 ответ 1

1

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/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/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>

1
  • А когда инпутов несколько, надо слушать событие submit (или то же самое input) на форме.
    – yar85
    19 дек 2019 в 21:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.