vue.js - vue 对获得数据进行筛选,通过computed做筛选,得到的值第一次为空,第二次才有值
本文介绍了vue.js - vue 对获得数据进行筛选,通过computed做筛选,得到的值第一次为空,第二次才有值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
html
<div class="content_img clear">
<a :href="img.src" class="block" v-bind:style="{backgroundImage: 'url(' + img.url + ')'}" v-for="(img,index) in filteredStyle">
<div class="tx">{{img.name}}</div>
<div class="xq">
<div>
<span class="fl">{{img.type}}</span>
<span class="fl n">1张</span>
</div>
</div>
<span class="sc" v-on:click="sC(img.url,img.type,index)" :class="{'a':classItem.indexOf(img.url)>=0}" v-on:click.prevent=""></span>
</a>
</div>
js
data: {
img: { url:"",name:"",type:""}, imgS:[]
}
mounted: function(){
Vue.http.get('js/common1.json').then((response) => {
console.log(1)
vm.$data.imgS=response.data;
})
},
computed: {
filteredStyle: function () {
console.log(2);
var self = this;
console(this.imgS[0]);
return this.imgS[0];
}
}
运行结果是
2//先运行computed
1//运行mounted
2//数据变化再次执行computed
imgS[0]的值//能够打印出值,但是不能提供给html里面,所以页面没有变化
问题:怎么样才能得到computed第二次执行的数据呢?是不是它只传递第一次的值呢?
解决方案
直接賦值就好了,不需要經過computed
data(){
return {
filteredStyle:{}
}
},
mounted(){
this.$http.get('js/common1.json').then((response) => {
this.imgS=response.data;
this.filteredStyle =this.imgS[0]
})
}
这篇关于vue.js - vue 对获得数据进行筛选,通过computed做筛选,得到的值第一次为空,第二次才有值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文