Почему input.value не меняется второй раз

#javascript #vuejs

Делаю свой input, ввожу в него данные и он сразу их заменяет на "11.11", так у меня
и должно быть. Но если после этой замены я продолжаю вводить данные, он перестаёт их
заменять, этого я не понимаю.

У меня стоит  v-bind:value="val" и по идее если я перезаписываю this.val он должен
это отображать в инпуте. Сам val меняется, я его выводу, но не в инпуте.



Vue.component('currency-input', {
  template: `
       val: {{val}}
    `,
  data: function() {
    return {
      val: ""
    };
  },
  methods: {
    updateValue: function(value) {
      this.val = "11.11";
    }
  }
});

// создание корневого экземпляра
var app = new Vue({
  el: '#app',
  template: `

                    
                    
`,

})







    

Ответы

Ответ 1

Проблема в том, что vue при привязке данных использует отслеживание зависимостей
и меняет только то, что изменилось.

Когда вы одному и тому же свойству val раз за разом присваиваете одно и то же значение
- оно не меняется, а потому не вызывает обновления биндингов.

Привязку данных следует применять только в тех случаях когда есть лишь один источник
изменений в один момент времени, а не когда два источника данных (вы и пользователь)
"дерутся" за одно и то же свойство.

v-model же работает потому что в свойство val записываются сначала данные от пользователя,
потом ваши. Но это не решение: использовав v-model вы больше не сможете гарантировать
что в свойстве val находится именно то что вам нужно.

Правильно в таком случае работать с элементом напрямую.



PS если вы пытаетесь таким хитрым образом сделать фильтрацию вводимых символов -
лучше блокируйте нежелательные символы через preventDefault() а не через присвоение
value. Присвоение value сбрасывает текущее положение текстового курсора.


Ответ 2

Есть два варианта:

A. Использовать v-model для двустороннего связывания:




B. Создать ссылку на input:




и в методе updateValue явно обновлять значение поля ввода:

this.$refs.input.value = this.val;


Документация