Question

为什么单击按钮时未触发Vue.js @input事件？

当我直接更改$oldKeyword = 'Mercedes Ac Compressor Search Item 2019'; $keywords = explode(" ", $keyword); shuffle($keywords); $newkeystr = implode(" ", $keywords);的值时（单击输入元素并键入新值），将触发count方法。

alert

new Vue({
  el: "#app",
  data: {
    count: 0

  },
  methods: {
    add: function() {
      this.count += 1;
    },
    alert: function() {
      alert('Count has been changed!');
    }
  }
})

Answer 1

您可以从alert方法内部调用add方法：

add: function() {
  this.count += 1;
  // invoke alert()
  this.alert();
}

Answer 2

我确定它的@change不是@input：

<input type="text" v-model.number="count" @change="alert">

或者：

watch : {

   number: function (newVal) {

     alert();

  }

}

Answer 3

@input不能对input标签进行任何更改；它是在用户直接修改input标记时触发的。您想要类似watch的内容：

new Vue({
  el: "#app",
  data: {
    count: 0
  },
  methods: {
    add: function() {
      this.count += 1
    }
  },
  watch: {
    count: function() {
      alert('Count has been changed!')
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="text" v-model.number="count" />
  <button @click="add">+1</button>
</div>

为什么单击按钮时不触发Vue.js @input事件？

3 个答案: