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

  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-model 存在的原因。查看此问题和答案以获取更多详细信息。