Question

我是VueJS的新手，我有多个分别对元素进行显示/隐藏的切换。

代码如下：

<div id="card-1">
    <ul v-if="isOpen">
        <li>hello</li>
        <li>world</li>
    </ul>
    <a @click="toggle(1)">
        <span id="list-toggler-btn-1">
            <i class="fa fa-chevron-up"></i> Hide all units
        </span>
    </a>
</div>

<div id="card-2">
    <ul v-if="isOpen">
        <li>banana</li>
        <li>apple</li>
        <li>mango</li>
    </ul>
    <a @click="toggle(2)">
        <span id="list-toggler-btn-2">
            <i class="fa fa-chevron-up"></i> Hide all units
        </span>
    </a>
</div>

在Vue中：

new Vue({
    el: '#app',
    data: {
        isOpen: 1
    },
    methods:{
        toggle: function(n){
            this.isOpen = this.isOpen == 0 ? 1 : 0;
                $("#list-toggler-btn-"+n).html(this.isOpen == 0 ?
                    '<i class="fa fa-chevron-down"></i> Show all units' : '<i class="fa fa-chevron-up"></i> Hide all units');
            });
        }
    }
});

到目前为止，当单击card-1时，card-2和toggle(n)都处于显示/隐藏状态，我希望仅对其自身元素进行切换，我该怎么做在Vue中？

Answer 1

TLDR；理想情况下，您的card应该是一个单独的组件，这样每个组件都将保持自己的本地状态。

在上述示例中，您可以执行以下操作：

请勿将jQuery与Vue代码混合使用。您将不需要它。
从MVVM而非DOM操作方面考虑。

您的代码应为：

<div id="card-1">
    <ul v-if="!isHidden(1)">
        <li>hello</li>
        <li>world</li>
    </ul>
    <a @click="toggle(1)">
        <span id="list-toggler-btn-1">
            <template v-if="isHidden(1)">
                <i class="fa fa-chevron-down"></i> Show all units
            </template>
            <template v-else>
                <i class="fa fa-chevron-up"></i> Hide all units
            </template>
        </span>
    </a>
</div>

<div id="card-2">
    <ul v-if="!isHidden(2)">
        <li>banana</li>
        <li>apple</li>
        <li>mango</li>
    </ul>
    <a @click="toggle(2)">
        <span id="list-toggler-btn-2">
            <template v-if="isHidden(2)">
                <i class="fa fa-chevron-down"></i> Show all units
            </template>
            <template v-else>
                <i class="fa fa-chevron-up"></i> Hide all units
            </template>
        </span>
    </a>
</div>

JavaScript辅助代码应为：

new Vue({
    el: '#app',
    data() {
        return {
            // Maintain a list of hidden cards
            // Initially empty
            hiddenCards: []
        }
    },

    methods:{
        toggle(cardNumber) {

            // Assuming each card has unique cardNumber
            let hiddenCard = this.hiddenCards.find(cardNumber);

            if (hiddenCard) {
                // Item is hidden. Remove from hidden list and show it.
                this.hiddenCards = this.hiddenCards.filter((x) => x !== cardNumber);
            } else {
                // Hide the card now by adding to the list.
                this.hiddenCards = this.hiddenCards.concat(cardNumber);
            }
        },

        isHidden (cardNumber) {
            return this.hiddenCards.findIndex(cardNumber) > -1;
        }
    }
});

VueJS多次切换到打开/隐藏元素

1 个答案: