Vue JS v模型值更新不适用于单击事件

Posted 2021-04-29

我有一个应用程序，该应用程序在单击按钮时更新input元素的值。

我正在使用Vue JS v-model进行数据绑定。

html：

<div id="app">
<div>{{ response }}</div> <br>
 <input type="text" v-model="response.ruleName" value="" placeholder="" class="editing">
 <button @click="myalert">Click me</button>
</div>

JS：

var response = {
    ruleName: "ruleJohn",
}
new Vue({
  el: "#app",
  data () {
        return {
            response
        }
  },
  methods: {
    myalert: function(e) {
      document.querySelector('.editing').value = e.target.innerText;
        },

  }
})

这里正在演奏小提琴：https://jsfiddle.net/38Lj971g/

现在，当我尝试使用键盘编辑输入值时，响应值会改变。

当我尝试单击按钮时，尽管输入值改变了，但是响应没有改变。

如何处理v-model进行此类单击数据更新？

答案

不要直接编辑输入值，而是编辑从中获取数据的v模型，就像这样：

<button @click="response.ruleName = 'Click me'">Click me</button>