手动设置值时，Vue.js观察器未执行

Question

我有这个Vue组件：

app-route

当我执行methods: { ... toggleTyping: function () { this.composing = !this.composing; }, ... }, data: function () { return { composing: false, }; }, watch: { composing: function (val) { alert(val); } } 时，不会调用观察者。我对vuejs很新。

Answer 1

你展示的一切都有效。错误必须在其他地方。

new Vue({
  el:"#app",
  methods: {
    toggleTyping: function() {
      this.composing = !this.composing;
    },
  },
  data: function() {
    return {
      composing: false,
    };
  },
  watch: {
    composing: function(val) {
      alert(val);
    }
  }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <button @click="toggleTyping()">Toggle</button>
</div>

Answer 2

好吧，谢谢大家，问题非常奇怪，我在一个名为type的组件的主体中也声明了一个函数（它正在制作一个打字动画，所以我选择了这个名字）。当我重命名该功能时，它开始起作用了！

我将失败的代码澄清并帮助其他人：

 ....
    ,
    type : function () {
        ...
    },
    watch: {
        composing: function (val) {
            alert(val);
            //Never called!
        }
    }