在 Vue.js 应用程序中；如何在 v-for 循环中将“活动”类添加到按钮

Question

在我的 Vue 应用程序中：我使用 v-for 来呈现产品 div，每个 div 都有一对按钮，“新”和“使用”，我想在按钮时添加“活动”类点击。问题是我正在向所有“新”按钮或所有“使用”按钮添加“活动”类；很确定有一种 Vue 方法可以做到这一点，除了获取单击按钮的索引并将类设置为相应的 el。我错过了什么？

标记：

<div id="app">
    <div class="products">

        <div class="product" v-for="product in products" :key="product.productID">
            <div class="product-image">
                <img :src=product.imgDef :alt="product.name" v-bind:title="product.name" />
            </div>
            <div class="product-summary">
                <p>{{ product.name }}</p>
                <p>{{ product.info }}</p>
                <ul>
                    <li v-for="detail in product.details">{{ detail }}</li>
                </ul>

                <div
                    class="conditions"
                    v-for="variant in product.variants"
                    v-bind:key="variant.variantID"
                    v-bind:style="variant.variantStyleObj"
                >
                    <!--
                        renders a 'new' button and a 'used' button in each div.product;
                        - clicking should add 'active' class only to clicked button
                    -->
                    <button
                        type="button"
                        v-on:click="updateProductImage(variant.variantImage, variant.variantID, product.productID, variant.condition)"
                        :class="[ 'condition', variant.condition, {active: conditionClass == variant.condition} ]"
                    >
                    {{ variant.condition }}
                    </button>
                </div>
            </div><!-- END .product-summary -->
        </div><!-- END .product -->
</div><!-- END #app -->

js:

var app = new Vue({
    el: '#app',
    data: {
        products: [
            {
                productID: 1,
                name: "",
                info: "",
                imgDef: "../../images-dev/...jpg",
                details: [],
                inStock: false,
                variants: [
                    {
                        variantID: "123",
                        variantImage: "../../images-dev/1a.jpg",
                        condition: "new"
                    },
                    {
                        variantID: "321",
                        variantImage: "../../images-dev/1b.jpg",
                        condition: "used"
                    }
                ],
                inventory: 9
            },
        cart: 0,
        // conditionClass: ""
    },
    methods: {
        addToCart: function() {
            this.cart += 3;
        },
        updateProductImage: function(variantImage, variantKey, productKey, variantCondition) {
            this.products[productKey-1].imgDef = variantImage;
            this.conditionClass = variantCondition;
        }
    }
})

Answer 1

如果您不想更改 products 数组，可以，而不是使用单个全局 conditionClass：

var app = new Vue({
    el: '#app',
    data: {
        // ...
        cart: 0,
        conditionClass: ""
    },

将其制成一个对象，以某种方式将其作为一个地图工作，该地图将以productID 作为键，产品的conditionClass。

Demo JSFiddle here.

例子：

var app = new Vue({
    el: '#app',
    data: {
        // ...
        cart: 0,
        conditionClass: {} // initialize as empty object
    },

将:class 更改为通过密钥访问conditionClass（为简洁起见，去掉了其他部分）：

来自

<button ... :class="[{active: conditionClass == variant.condition}]">

收件人：

<button ... :class="[{active: conditionClass[product.productID] == variant.condition}]">

最后，在方法中设置键：

updateProductImage: function(variantImage, variantKey, productKey, variantCondition) {
  this.products[productKey - 1].imgDef = variantImage;
  // line below was: this.conditionClass = variantCondition;
  Vue.set(this.conditionClass, productKey, variantCondition);
}