vue.js - vuejs 外部程序操作Vuejs内部属性问题
本文介绍了vue.js - vuejs 外部程序操作Vuejs内部属性问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
这个问题可以一笔带过。是这样的我用vue-cli构建了一个项目,里面有个组件叫A-components,A-components里面有个属性叫myProperty,我想在chrome控制台中写脚本,然后打印出myProperty的属性。问一下大家,这怎么实现呢?
解决方案
如果是單純想要進行調試,可以試試這個
如果是想從外部操作
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'
一樣會觸發其更新機制。
實現
可試試看在 console
中
window.vueInstance.$children[0].$data.foo = 'test'
可以看見畫面上的值跟著變化
这篇关于vue.js - vuejs 外部程序操作Vuejs内部属性问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文