Vue组件内异步更新图片Src属性
事情是这样的:系统内的存的均为图片的ID号,从数据库里拿出来以后在Vue的组件内进行数据绑定,但是绑定的是一个ID号,需要转换为图片的url地址,但通过组件的自定义函数处理后不显示。第一步:绑定组件的自定义函数第二步:第自定义函数中返回完整的URL第三步:没有第三步了,img.src属性没了。。。。我的解决办法有点饶:1. 父对象中定义一个存储图像ID和URL的键值对象,并进行初始化2. 通过pr
事情是这样的:
系统内的存的均为图片的ID号,从数据库里拿出来以后在Vue的组件内进行数据绑定,但是绑定的是一个ID号,需要转换为图片的url地址,但通过组件的自定义函数处理后不显示。
第一步:绑定组件的自定义函数
第二步:第自定义函数中返回完整的URL
第三步:没有第三步了,img.src属性没了。。。。
我的解决办法有点饶:
1. 父对象中定义一个存储图像ID和URL的键值对象,并进行初始化
2. 通过props将这个对象赋值给组件内部,img.src = photos[id]
3. 同时再给img定义一个其它的属性来调用get_cover回调 img.data-cover=“get_cover"
4. 当组件的回调被执行时通过this.$emit 来触发父组件的函数
5. 在父组件的函数中更新自己的photo键值对。。。
局部代码如下:
第一步:
new Vue({
el:'#demo1',
data() {
return {
photoObj:{}
}
},
created(){
//始始化photoObj的数据,下面是根据我自己的内容进行的初始化
if(sizeItemData.length > 0){
let photoTmp = {};
sizeItemData[0]['attr'].forEach(function(attr){
console.log('create====',attr.photo);
let key = attr.photo;
photoTmp[key] = key;
});
this.photoObj = photoTmp;
}
},
.........................
第二步:
JS代码部分
Vue.component('size-item',{
template:$("#sizeItemTpl").html(),
//声明props,这里可以把组件外的变量传入组件内,组件调用时需要进行v-bind
props:['photos'],
组件绑定部分:
<size-item v-for="(row,index) in vItemData" :key="index" v-bind:index="index" v-bind:item="row" v-bind:photos="photoObj" v-on:up-global-photos="updatePhotos"></size-item>
注意里面的:v-bind:photos="photoObj"
这里是结合上面的JS部分,将像对象中的photoObj映射到组件内部通过photos进行使用。
第三步:
<img :data-src="getCover(attr.photo)" :src="photos[attr.photo]" class="preview-file" v-if="item.attr[aIndex].photo != 0"/>
看这到里的 :src 绑定的第二步中的photos的值
同时还绑定了一个 :data-src="getCover" 他的目的就是为了触发异步获取图片URL地址
第四步:回调函数内
getCover:function(photo_id){
if(photo_id == 0) return true;
that = this;
let tmpSrc = this.photos[photo_id];
if(undefined == tmpSrc || tmpSrc.indexOf('http') == -1){
axios({
method:'get',
url:'/admin.php/admin/public_ctrl/attachmentUrl.html?id='+ photo_id
}).then(function(res){
let imageUrl = res.data;
that.$emit('up-global-photos',[photo_id,imageUrl]);
that.$forceUpdate();
});
}
}
注意这的: that.$emit('up-global-photos') ,这里的up-global-photos 在第二步代码中的组件部分通过 v-on:up-global-photos="updatePhotos" 来将对应到像Vue的自定义方法updatePhotos
别忘了在axios执行后,重新渲染一下组件。that.$forceUpdate(); 否则会莫名的出现图片不显示的奇怪问题。另外一定要判断一下之前有没有获取过该图,否则使用forceUpdate会死循环。
第五步:也是胜利的一步
new Vue({
el:'#sizeItemBox',
methods:{
updatePhotos:function(val){
console.log('new photo=',val);
this.photoObj[val[0]] = val[1];
}
。。。。。。。。。。。。。。。。。。。。。。。
前后省略不相干的代码
如此转一大圈解决了一个JQuery $.get()就能搞定的问题。
更多推荐
所有评论(0)