打开/隐藏元素的VueJS多点切换

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时，它都是显示/隐藏的，我希望它只对自己的元素进行切换，我如何在Vue中做到这一点？

Answer 1

理想情况下，您的card应该是一个单独的组件，因为每个组件都会维护自己的本地状态。

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

1. 不要将jQuery与Vue代码混合。你不会需要的。
2. 考虑一下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;
        }
    }
});