如何在没有 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

你得到这个行为是因为data它是一个reactive对象。当你绑定valuewith 时step_answer，你创建了单向绑定data -> component，这意味着step_answer它是主绑定。要实现Two-way绑定而不v-model需要捕获@input event并附加它或step_master使用new value.<input&nbsp; v-bind:value="step_answer"&nbsp; v-on:input="step_answer = $event.target.value">完整示例：<div id="app">&nbsp; &nbsp; <span>Time: {{remaining_seconds}}</span><br>&nbsp; &nbsp; <input&nbsp; v-bind:value="step_answer"&nbsp; v-on:input="appendValue($event)"></div>app = new Vue({&nbsp; el: '#app',&nbsp; data: {&nbsp; &nbsp; remaining_seconds: 60,&nbsp; &nbsp; step_answer: "asdasd",&nbsp; },&nbsp; created: function (){&nbsp; &nbsp; setInterval(()=>{&nbsp; &nbsp; &nbsp; this.remaining_seconds--&nbsp; &nbsp; },1000);&nbsp; },&nbsp; methods:{&nbsp; &nbsp; appendValue(e){&nbsp; &nbsp; &nbsp; this.step_answer=e.target.value;&nbsp; &nbsp; }&nbsp; }})

Answer 2

:value，一种单向绑定，永远不会让来自键盘的输入更新组件的状态。这就是 v-model 存在的原因。查看此问题和答案以获取更多详细信息。