我正在开发一个MVC(V5.2.7.0)、vue项目(我是一个vue新手)。其中一个页面显示产品图像列表。当点击图像芯片时,它会改变相应的大图像。我无法访问大图像的 src(出现未定义错误)。
1-cshtml 片段
<div id="product-card-container" class="product-card__container mt-4">
<div class="d-flex flex-column product-card" v-for="product in displayedProducts">
<a v-bind:href="'/products/detail/' + product.Code">
<!-- note: when a chip image is clicked, it needs to change the src of the product image -->
<img class="product-card__image" id="product.Code + '-imgProductImage'" v-bind:src="product.ImageUrl" v-on:click="selectProduct(product.Code)" />
</a>
<span class="product-card__name mt-2">{{product.Name}}</span>
<div class="d-flex flex-row justify-content-between align-items-center mt-3">
<section class="product-card__chip-container d-flex flex-row flex-wrap gap-2">
<span v-for="color in product.ColorChips">
<!-- note: when a chip image is clicked, it needs to change the src of the product image -->
<img class="product-card__chip-image" id="product.Code + '-imgProductChipImage'"
v-bind:src="color.ImageUrl" v-bind:title="color.ColorDesc + ' ' + color.SurfaceDesc" v-on:click="changeBrandImage(product.Code,color.ImageUrl)"/>
</span>
</section>
<span v-if="product.AdditionalColors > 0">+{{product.AdditionalColors}}</span>
</div>
</div>
</div>
2- js 文件片段
changeBrandImage(productCode, imageurl) {
var BrandImageId = productCode + "-imgProductImage"; var BrandImage = $('#' + BrandImageId);
if (BrandImage != null) {
var BrandImageSrc = $(BrandImageId).attr('src');
// BrandImageSrc is null ???
if (BrandImageSrc != null) {
BrandImage.attr('src', 'https://www.bitxbit.com/wp-content/uploads/2017/05/logo_header.png');
}
}
}
我尝试了不同的 jquery 选择器方法。没有工作。