Question

在我的Vue应用程序中：我使用v-for渲染产品div，每个产品div都带有一对按钮，＆＃39; new＆＃39;和＆＃39;使用＆＃39;，我想添加＆＃39;有效＆＃39;单击按钮时的类。问题是我正在添加“活跃的”＃39;所有＆＃39; new＆＃39;按钮或所有＆＃39;使用＆＃39;纽扣;非常确定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);
}

在Vue.js应用程序中;如何添加＆＃39; active＆＃39;类在v-for循环中按钮

1 个答案: