VueJS: Dev Tools의 클릭 이벤트에서 이 데이터 속성이 업데이트되지 않는 이유

VueJS: Dev Tools의 클릭 이벤트에서 이 데이터 속성이 업데이트되지 않는 이유

아래 코드에서getWidth이벤트 핸들러(에 정의됨)methods객체) 업데이트data.width재산업데이트 시 변수widthVueJS의 Chrome addon에 라이브로 표시되어야 한다.

그러나 이 라이브 업데이트는 Vue DevTools에 표시되지 않는다.코드에 문제가 있는 건지, 내가 뭘 잘못하고 있는 건지 모르겠어.나도 Firefox에서 테스트를 해봤기 때문에 추가 기능은 문제가 되지 않아.

HTML

<div id="app">
  <p :style="{width: 200 + 'px'}" class="box">{{msg}}</p>
  <button v-on:click="getWidth">New Width</button>
</div>

JS

new Vue({
  el: '#app',
  data: {
    msg: 'Test Message',
    mywidth: ''
  },
  methods: { 
    getWidth: function(){
      this.mywidth = 20 * 2;
    }
  }
})

이런 일이 일어나는 이유는 당신이 실제로 당신의 것을 사용하지 않기 때문이다.mywidth데이터 속성.

Vue DevTools는 Vue 구성 요소의 데이터 속성에 대한 참조를 설정된 것이 아니라 코드로 액세스할 때만 업데이트한다.

단순히 데이터 속성을 다른 곳에 사용(예: 퍼팅){{ mywidth }}템플릿)에서 Vue DevTools 확장에서 업데이트됨.

참조URL: https://stackoverflow.com/questions/46606499/vuejs-why-this-data-property-doesnt-updated-on-click-event-in-dev-tools