v-bind绑定属性data更新后渲染问题
来源：11-9 首页细节调整&首页的Vue数据绑定
ahao430
2017-02-05
vue2.0。通过vue-resource实现ajax，$set绑定到data。
index-top中banner只有一条数据，直接用v-bind绑定，渲染失败。对象不存在。尚未写入data。
<div class="slider-banner"> <div> <a :href="d.top[0].reference_id"> <img class="cover" :src="d.top[0].ad_pic_url" :alt="d.top[0].ad_name"> </a> </div> </div>
改成 d.top && d.top[0].reference_id 或者用v-if =“d.top”，不渲染。数据写入data后也不会重新渲染。
v-for渲染数据正常。
<div class="slider-banner" v-for="(item,index) in d.top" v-if="index==0"> <div> <a :href="item.reference_id"> <img class="cover" :src="item.ad_pic_url" :alt="item.ad_name"> </a> </div> </div>
是否v-for和v-if，v-bind的执行阶段不同？还是v-for会自动watch数据变化实时更新渲染？
这里如果不用v-for，是不是只能在ajax成功返回后手动添加回调函数来重新渲染？
data在mounted写入。
new Vue({
el: '#app',
data: {
d:{}
},
mounted: function(){
this.renderData();
},
methods: {
renderData: function () {
var url="/ajax/index";
var self=this;
console.log(this.d)
this.$http.get(url).then(function(res){
console.log(res.body);
self.$set(self.d,"top",res.body.items[0].data.data);
self.$set(self.d,"hot",res.body.items[1].data.data);
self.$set(self.d,"recommend",res.body.items[2].data.data);
self.$set(self.d,"female",res.body.items[3].data.data);
self.$set(self.d,"male",res.body.items[4].data.data);
self.$set(self.d,"free",res.body.items[5].data.data);
self.$set(self.d,"topic",res.body.items[6].data.data);
console.log(self.d.top[0])
})
}
}
})写回答
1回答
-
ahao430
提问者
2017-02-06
做书籍详情又遇到相同问题了。想了下应该还是v-bind绑定还不存在的对象的问题，貌似只能先获取数据再创建vue对象。
查了下vue-resource还有一个绑定到全局vue对象的方法。
book.js修改如下：
var id = location.search.match(/(\?|&)id=([^&]*)(&|$)/i)[2]; var url="/ajax/book?id="+id; Vue.http.get(url).then(function(res){ new Vue({ el: '#app', data: { d: res.body } }); });00
相似问题