Vue JS v-model 值更新不适用于点击事件答案

【问题标题】：Vue JS v-model value update not working for on-click eventsVue JS v-model 值更新不适用于点击事件
【发布时间】：2020-05-16 14:30:40
【问题描述】：

我有一个应用程序，我在点击按钮时更新 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这样的点击数据更新如何处理？

【问题讨论】：

标签： vue.js vuejs2 v-model

【解决方案1】：

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

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

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

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

【讨论】：