怎么改变vue中data的数据

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);
阅读 11.5k
2 个回答

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

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

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:'加载中.....'}]
}

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题