vuejs v-model отключить автоматическую смену переменной

vuejs v-model отключить автоматическую смену переменной

19.12.2019 01:17:54 Просмотров 15 Источник

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

<v-text-field label="Название" :value="item.name" v-model="item.name"></v-text-field>
У вопроса есть решение - Посмотреть?

https://ru.stackoverflow.com/questions/1060685/vuejs-v-model-%d0%be%d1%82%d0%ba%d0%bb%d1%8e%d1%87%d0%b8%d1%82%d1%8c-%d0%b0%d0%b2%d1%82%d0%be%d0%bc%d0%b0%d1%82%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d1%83%d1%8e-%d1%81%d0%bc%d0%b5%d0%bd%d1%83-%d0%bf%d0%b5%d1%80%d0%b5%d0%bc%d0%b5%d0%bd%d0%bd%d0%be%d0%b9#comment1815381_1060685
К примеру в вышеуказанном коде идёт жесткая привязка к item.name, то бишь после изменения input value, item.name изменится во всем документе. А мне нужно изменять item.name например в том же методе, методы я сам напишу, меня интересует именно логика работы подобного механизма
https://ru.stackoverflow.com/questions/1060685/vuejs-v-model-%d0%be%d1%82%d0%ba%d0%bb%d1%8e%d1%87%d0%b8%d1%82%d1%8c-%d0%b0%d0%b2%d1%82%d0%be%d0%bc%d0%b0%d1%82%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d1%83%d1%8e-%d1%81%d0%bc%d0%b5%d0%bd%d1%83-%d0%bf%d0%b5%d1%80%d0%b5%d0%bc%d0%b5%d0%bd%d0%bd%d0%be%d0%b9#comment1815397_1060685
Зря удалили комментарий, это почти то что нужно) оформите пожалуйста ответ, выберу правильным
https://ru.stackoverflow.com/questions/1060685/vuejs-v-model-%d0%be%d1%82%d0%ba%d0%bb%d1%8e%d1%87%d0%b8%d1%82%d1%8c-%d0%b0%d0%b2%d1%82%d0%be%d0%bc%d0%b0%d1%82%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d1%83%d1%8e-%d1%81%d0%bc%d0%b5%d0%bd%d1%83-%d0%bf%d0%b5%d1%80%d0%b5%d0%bc%d0%b5%d0%bd%d0%bd%d0%be%d0%b9#comment1815398_1060685
Подскажите ещё, правильно ли я передал $event.target.value в функцию? change_client_value(item.name, $event.target.value)
https://ru.stackoverflow.com/questions/1060685/vuejs-v-model-%d0%be%d1%82%d0%ba%d0%bb%d1%8e%d1%87%d0%b8%d1%82%d1%8c-%d0%b0%d0%b2%d1%82%d0%be%d0%bc%d0%b0%d1%82%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d1%83%d1%8e-%d1%81%d0%bc%d0%b5%d0%bd%d1%83-%d0%bf%d0%b5%d1%80%d0%b5%d0%bc%d0%b5%d0%bd%d0%bd%d0%be%d0%b9#comment1815403_1060685
Можете пожалуйста ещё подсказать, во vue можно обратиться как-то так напрямую к объекту без привязки v-model? document.querySelector('input').val
https://ru.stackoverflow.com/questions/1060685/vuejs-v-model-%d0%be%d1%82%d0%ba%d0%bb%d1%8e%d1%87%d0%b8%d1%82%d1%8c-%d0%b0%d0%b2%d1%82%d0%be%d0%bc%d0%b0%d1%82%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d1%83%d1%8e-%d1%81%d0%bc%d0%b5%d0%bd%d1%83-%d0%bf%d0%b5%d1%80%d0%b5%d0%bc%d0%b5%d0%bd%d0%bd%d0%be%d0%b9#comment1815411_1060685
можно, но нужно изучить структуру итогового html.

Ответы - vuejs v-model отключить автоматическую смену переменной / vuejs v-model отключить автоматическую смену переменной

yar85

20.12.2019 12:11:45

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>

https://ru.stackoverflow.com/questions/1060685/vuejs-v-model-%d0%be%d1%82%d0%ba%d0%bb%d1%8e%d1%87%d0%b8%d1%82%d1%8c-%d0%b0%d0%b2%d1%82%d0%be%d0%bc%d0%b0%d1%82%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d1%83%d1%8e-%d1%81%d0%bc%d0%b5%d0%bd%d1%83-%d0%bf%d0%b5%d1%80%d0%b5%d0%bc%d0%b5%d0%bd%d0%bd%d0%be%d0%b9/1060971#comment1815960_1060971
А когда инпутов несколько, надо слушать событие submit (или то же самое input) на форме.
Закрыть X