这个问题可以一笔带过。是这样的我用vue-cli构建了一个项目,里面有个组件叫A-components,A-components里面有个属性叫myProperty,我想在chrome控制台中写脚本,然后打印出myProperty的属性。问一下大家,这怎么实现呢?
如果是單純想要進行調試,可以試試這個
vue-devtools
如果是想從外部操作
Vue
內部屬性的話
假設現在架構是這樣:
var Test = Vue.extend({
template: '<h1>{{foo}}</h1>',
data: function() {
return {
foo: 'foo'
}
}
})
window.vueInstance = new Vue({
el: 'body',
components: {
test: Test
}
})
在 Chrome
的 console
就可以透過:
window.vueInstance.$children[0].$data.foo
來取得或是賦值
window.vueInstance.$children[0].$data.foo = 'test'
一樣會觸發其更新機制。
實現
jsFiddle
可試試看在 console
中
window.vueInstance.$children[0].$data.foo = 'test'
可以看見畫面上的值跟著變化
{
data,
methods,
...
ready:function(){
window.vm = this;
}
}