XImg图片正确路径重复

[rxhluck]

//  父组件中引用子组件goodItem传递商品信息
<goodItem v-for="(goods, index) in goodsList" :key="index" :goods="goods" :type="0" ref="goodItem"></goodItem> 
 //  父组件中引用的子组件goodItem
<template>
	<div class="goodsitem"  @click="_goodDetail(goods.goodsInfo.id,1)">
		<x-img :offset="-100" :scroller="$parent" :src="goods.coverPicPath" :default-src="defaultpng" ref="test"></x-img>
		<div class="goodsInfo">
			<div class="shopSecRight">
				<p class="goodsname">{{ goods.goodsInfo.goodsName }}</p>
			</div>
			<div class="goodsBottom">
				<p class="goodssell">
					<span class="goodsPrice">&yen;{{ goods.goodsInfo.sellingPrice }}</span>
					<span>已售:</span>
					<span>{{ goods.sales }}</span>
				</p>
				<span class="buyBtn">购买</span>
			</div>
		</div>
	</div>
</template>

<script type="text/ecmascript-6">
	import { XImg } from 'vux';
	import router from '@/router';
	import defaultpng from '@/assets/app/default.png';

	export default{
		props: {
			goods: {
				type: Object
			},
			type: {
				type: Number
			}
		},
		data () {
			return {
				defaultpng: defaultpng
			};
		},
		created() {
			console.log(this.goods.coverPicPath);
		},
		methods: {
			_goodDetail(id, type) {
				// type为0是商品详情,1是套餐详情
				router.push({path: '/goodDetail', query: { goodsId: this.goods.goodsInfo.id, storeId: this.goods.goodsInfo.storeId, type: this.type }});
			}
		},
		components: {
			XImg
		}
	};
</script>

[airyland]

并不存在 data-src 这个属性，这个属性是组件生成的，但是你手动设置被当成 html 传递到组件内导致混乱了。

src="goods.coverPicPath" :default-src="defaultpng"

[rxhluck]

有点不太明白作者大大什么意思

[airyland]

貌似我有点看花，这两个地址是不是一个是默认图片，一个是产品图片？

[rxhluck]

不是两个都是产品图片，比如说第一次加载全部产品，产品A图的地址是A，此时搜索产品B，子组件的goods改变，图片地址有两个，并且实际显示的是第一个图片。

[rxhluck]

<div class="search_input">
	<input type="text" placeholder="请输入商品名称" id="searchInput" v-model="goodsName" />
	<a href="javascript:void(0)" @click="_search()"></a>
</div>
<scroller style="background: white;" lock-x scrollbar-y use-pullup use-pulldown height="-132" @on-pullup-loading="_loadMore" @on-pulldown-loading="_refresh" v-model="status" ref="scroller">
	<div id="searchresult">
		<div class="goodList">
			<goodItem v-for="(goods, index) in goodsList" :key="index" :goods="goods" :type="0" ref="goodItem"></goodItem>
		</div>
		<nomore v-show='LoadMoreWord && goodsList.length !== 0' :nomoremsg="nomoremsg"></nomore>
		<div class="good_null" v-if='goodsList.length === 0'>
			<img src="./nullrecord.png" alt="" />
					暂无相关的产品图
		</div>
	</div>
	<!--pullup slot-->
	<div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
		<span v-show="status.pullupStatus === 'loading'" class="ani"><spinner type="crescent"></spinner></span>
	</div>
	<!--pulldown slot-->
	<div slot="pulldown" class="xs-plugin-pulldown-container xs-plugin-pulldown-down" style="position: absolute; width: 100%; height: 40px; top: -40px; text-align: center;">
	        <span v-show="status.pulldownStatus === 'loading'"  class="ani">
	        	<spinner type="crescent"></spinner>
	        </span>
	 </div>
</scroller>
methods: {
			_maskerclick() {
				this.showchioce = !this.showchioce;
			},
			_search() {
				this._refresh();
			},
			_getGood() {
				let _this = this;
				axios.get(this.allport.shopCityAllGood, {
					params: {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						storeId: this.storeId,
						goodsName: this.goodsName,
						sort: this.sort
					}
				})
				.then(function (response) {
					response = response.data;
					if (response.success) {
						_this.pageLength = response.data.pages;
						if (_this.pageNum > 1) {
							response.data.list.forEach((item) => {
								_this.goodsList.push(item);
							});
						} else {
							_this.goodsList = response.data.list;
						}
						_this.$nextTick(() => {
							if (_this.$refs.scroller) {
								_this.$refs.scroller.reset();
								_this.$refs.scroller.donePullup();
								_this.$refs.scroller.donePulldown();
								_this.pullupEnabled && _this.$refs.scroller.enablePullup();
							}
						});
					} else {
						errfun(_this, response.errorCode, response.message);
					}
					_this.$vux.loading.hide();
				})
				.catch(function (error) {
					console.log(error);
					errfun(_this, 0, '');
				});
			},
			_loadMore() {
				this.pageNum++;
				if (this.pageLength >= this.pageNum) {
					this._getGood();
				} else {
					this.LoadMoreWord = true;
					this.$nextTick(() => {
						if (this.$refs.scroller) {
							this.$refs.scroller.reset();
							this.$refs.scroller.disablePullup();
						}
					});
				}
			},
			_refresh() {
				this.pageNum = 1;
				this.LoadMoreWord = false;
				this.$vux.loading.show({
					text: 'Loading'
				});
				this._getGood();
			}
		},
		created() {
			this.storeId = this.$route.query.storeId;
			this.goodsName = this.$route.query.goodsName;
			this._getGood();
		}

[airyland]

同个 x-img 修改 src 没有重新初始化，下个小版本修复。

[rxhluck]

目前已经找到方法更改，不过估计有点不太标准，在子组件里面直接对
updated() { this.$refs.ximg.$el.src = this.goodInfo.coverPicPath; }
进行赋值就行了