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;
        },

  }
})

在这里工作：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模型值更新不适用于点击事件

1 个答案: