如何更改使用 v-for 显示的图像列表中图像的 src?

问题描述 投票:0回答:0

我正在开发一个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 选择器方法。没有工作。

image vue.js src
© www.soinside.com 2019 - 2024. All rights reserved.