Как связать значение поля ввода без V-модели?

Question

В моем приложении Vue есть таймер и текстовое поле.

Когда я пытаюсь уменьшить оставшиеся секунды, изменения, которые я делаю в поле, продолжают исчезать. Таймер и поле совершенно не связаны.

Вот простая демонстрация, напишите что-нибудь в поле:

https://codepen.io/basabence/pen/jObwqgL

<div id="app">
    <span>Time: {{remaining_time}}</span><br>
    <input :value="step_answer" type="text">
</div>

app = new Vue({
  el: '#app',
  data: {
    remaining_seconds: 60,
    step_answer: "asdasd",
  },
  created: function (){
    setInterval(()=>{
      this.remaining_seconds--
    },1000);
  }
})

Интересно, что если я поменяю :value на v-модель, она будет работать нормально, но я не хочу связывать это поле двусторонне ... Кто-нибудь из вас встречался с таким поведением раньше?

Спасибо заранее

Answer 1

Вы получаете это поведение, потому что data является reactive объектом. Когда вы связываете value с step_answer, вы создаете одностороннюю привязку data -> component, что означает, что step_answer является мастером.

Для достижения Two-way привязки без v-model вам необходимо захватить @input event и добавить его или присвоить step_master с помощью new value.

<input
  v-bind:value="step_answer"
  v-on:input="step_answer = $event.target.value">

Полный пример:

<div id="app">
    <span>Time: {{remaining_seconds}}</span><br>
    <input
  v-bind:value="step_answer"
  v-on:input="appendValue($event)">
</div>


app = new Vue({
  el: '#app',
  data: {
    remaining_seconds: 60,
    step_answer: "asdasd",
  },

  created: function (){
    setInterval(()=>{
      this.remaining_seconds--
    },1000);
  },
  methods:{
    appendValue(e){
      this.step_answer=e.target.value;
    }
  }
})

Answer 2

:value, односторонняя привязка, никогда не позволит вводу с вашей клавиатуры обновлять состояние компонента. Вот почему v-модель существует. Проверьте этот вопрос и ответы для более подробной информации.