为什么Vue Dev Tools中的数据没有更新？

Question

我希望有人解释为什么这在Vue中不起作用。

的HTML

<div id="app">
  <button v-on:click="isActive = !isActive">Click me</button>
</div>

JS

vueApp = new Vue({
  el: '#app',
data: {
        isActive: false
      }
});

预期的点击行为： Vue开发工具-数据：isActive等于true

实际点击行为：数据：Vue开发工具-isActive等于false

但这确实

的HTML

<div id="app">
  <button v-on:click="isActive = !isActive">Click me</button>
  <p v-bind:class="{ active : isActive }">Some text</p>
</div>

JS

vueApp = new Vue({
  el: '#app',
data: {
        isActive: false
      }
});

预期的点击行为： Vue开发工具-数据：isActive等于true，并且p具有活动类。

实际点击行为： Vue开发工具-数据：isActive等于true，并且p具有活动类。

我的抱怨是，我希望Vue能够直接操作数据，而不是通过页面上的其他元素。

Answer 1

正如@Phil在评论中所发布的那样，存在一个问题，https://github.com/vuejs/vue-devtools/issues/41#issuecomment-162675083。

似乎页面上没有任何反应，数据不会在Vue Dev Tools中更新。但是，如果通过Vue Dev Tools刷新，则可以看到更改，因此该更改必须有效。

我们只是看不到Vue Dev Tools上的实时更改。

Answer 2

效果很好，看：

new Vue({
  el: '#app',
  data: {
    isActive: false
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <button v-on:click="isActive = !isActive">{{ isActive }}</button>
</div>