如何在没有 V-model 的情况下绑定输入字段值？

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-model，它可以正常工作 - 但我不想双向绑定此字段...你们中有人遇到过这种行为吗？

提前谢谢你

Answer 1

:value，一种单向绑定，永远不会让来自键盘的输入更新组件的状态。这就是 v-model 存在的原因。查看this question and answers了解更多详情。

Answer 2

你得到这个行为是因为data 是一个reactive 对象。当您将value 与step_answer 绑定时，您将创建单向绑定data -> component，这意味着step_answer 是主。

要在没有v-model 的情况下实现Two-way 绑定，您需要捕获@input event 并附加它或使用new value 分配step_master。

<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;
    }
  }
})