Vue JS v-model 值更新不适用于单击事件

Question

我有一个应用程序，我在单击按钮时更新 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;
        },

  }
})

这是工作 fiddle : https://jsfiddle.net/38Lj971g/

现在，当我尝试使用键盘编辑输入值时，响应值确实发生了变化。

当我尝试点击按钮时，虽然输入值改变但响应没有。

如何处理 v-model 这种点击数据更新？

Answer 1

不要直接编辑输入值，而是编辑它从中获取数据的 v 模型，如下所示：

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

或者，如果您想使用以下方法：

myalert: function(e) {
  this.response.ruleName = e.target.innerText;
}

Vue JS v-model 值更新不适用于单击事件

Vue JS v-model value update not working for on-click events

vue.js

vuejs2

v-model