怎么改变vue中data的数据

Question

var app3 = new Vue({

el:'#item',
data:{
    item_data:[
        
    ],
},
computed:{
},
methods: {

}

});

我想点击的时候改变vue的item_data这个是数据，能打印出来就是在页面渲染不
goods_box是li

li也是用vue遍历出来的，但是不是同一个app

li是app2

for(var j = 0; j < goods_box.length; j++){

goods_box[j].addEventListener('click',function(){
    item.style = 'left:0;z-index:999';
    //放置ajax请求
    var daya = '{name:"农夫山泉饮用天然水550ml",img:["image/1.jpg","image/2.jpg"],p_int:"从大山深处搬运的天然弱碱性水",pri:"0.99",old_pri:"99",sell:"9999",kg:"550ml",pac:"瓶装",qgp:"730天",storage:"常温",car_img:["image/1.jpg","image/2.jpg"]}'
    var items_data = eval('('+ daya +')');

// app3.item_data = data;
// console.log(app3.item_data);

},false);

Answer 1

1.用了vue不要用jQuery来操作dom绑定事件，直接在模板里用@click注册事件
2.在vue的组件实例外部是没办法直接访问data对象的。修改了也不会生效，因为vue检测不到变化

Answer 2

这个可以用组件化应用构建来解决，

html:

<div id="box">
    <todo-item v-for="item in datas" :todo="item" :key="item.name"></todo-item>
</div>

<button onclick="fun()">点击</button>

js:

Vue.component('todo-item',{
    props:['todo'],
    template:'<li>{{todo.name}}</li>'
});
var app = new Vue({
    el:'#box',
    data:{
        datas:[
            {name:'我是第一个'}
        ]
    }
});


function fun(){
    setTimeout(function(){
        app.datas = [{name:'我是第一次请求'}]
    },500);
    app.datas = [{name:'加载中.....'}]
}

这样就可以通过事件来改变。