Vue Dev Tools에서 데이터가 업데이트되지 않는 이유는 무엇입니까?

Vue Dev Tools에서 데이터가 업데이트되지 않는 이유는 무엇입니까?

왜 이것이 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 Dev Tools - 데이터: isActive = true

실제 클릭 동작: 데이터:Vue Dev Tools - 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 Dev Tools - 데이터: isActive는 true이고 p에는 활성 클래스가 있습니다.

실제 클릭 동작:Vue Dev Tools - 데이터: isActive는 true이고 p에는 활성 클래스가 있습니다.

제 고민은 Vue가 페이지의 다른 요소를 통하지 않고 직접 데이터를 조작할 수 있기를 기대했다는 것입니다.

@Phil이 댓글에 올린 것처럼 https://github.com/vuejs/vue-devtools/issues/41#issuecomment-162675083이라는 문제가 있습니다.

페이지에 응답할 내용이 없으면 Vue Dev Tools에서 데이터가 업데이트되지 않을 수 있습니다.그러나 Vue Dev Tools를 통해 새로 고친 경우 변경 사항을 볼 수 있으므로 반드시 작동해야 합니다.

Vue Dev Tools에서 실시간으로 변경 사항을 확인할 수 없습니다.

잘 작동합니다. 보세요.

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>

언급URL : https://stackoverflow.com/questions/43838363/why-doesnt-the-data-get-updated-in-vue-dev-tools