vuejs 外部程序操作Vuejs内部属性问题

Question

这个问题可以一笔带过。是这样的我用vue-cli构建了一个项目，里面有个组件叫A-components，A-components里面有个属性叫myProperty,我想在chrome控制台中写脚本，然后打印出myProperty的属性。问一下大家，这怎么实现呢？

Answer 1

如果是單純想要進行調試，可以試試這個

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'

可以看見畫面上的值跟著變化

Answer 2

{
    data,
    methods,
    ...
    ready:function(){
        window.vm = this;
    }
}