切换li元素的布尔数据/属性值

Question

这是我组件的简化版本。我试图切换一个选中标记，如果从列表中选择了一种语言，默认为英语。当前，它们全部被选中或全部取消选中。

<template>
<ul>
    <li
        v-for="(subNavItem, index) in navItem.children"
        :key="index"
        @click="toggle(); selectLanguage(subNavItem.value)"
    >
        <a>                
            <span>
                {{ subNavItem.label }}
            </span>
            <span
                v-if="isEnabled"
                class="navMobile__list__item-icon-enabled"
            >
                <span class="icon icon--tick">
                    <svg class="icon-inner">                            
                        <use xlink:href="#tick" />
                    </svg>
                </span>
            </span>
        </a>
    </li>
</ul>
</template>

<script>

export default {
    data() {
        return {  
            selectedLocale: '',         
            isEnabled: false,
        };
    },  
    computed: {
        ...mapState({
            locales: state => state.locales,
            localeLabels: state => state.localeLabels,
        }),
    },  
    methods: {  
        selectLanguage(locale) {
            const updatedQueryString = appendQueryString({ locale });
            window.location.search = updatedQueryString;
        },      
        toggle() {
            this.isEnabled = !this.isEnabled;
        },
    },    
};

</script>

这些是我目前的道具/数据。

我想我需要将isEnabled设置为prop，然后将v-if更改为：

v-if="subNavItem.isEnabled"

以这种方式这样做最有意义吗？如果是这样，我如何将isEnabled属性附加到适当的subNavItems？

视觉：

编辑： 好的，我知道了如何更新对象。

methods: {
    toggle(subNavItem, index) {
        this.$set(subNavItem, 'isSelected', !subNavItem.isSelected)
}

但是现在我的v-if不在关注此更改。

v-if="subNavItem.isEnabled"

Answer 1

这是我解决此问题的方法：

<li
    v-for="(subNavItem, index) in navItem.children"
    :key="index"
    @click="toggle(subNavItem, navItem)"
>

methods: {
    toggle(subNavItem, navItem) {
        // uncheck all languages
        navItem.children.map(function(x) {
            x.isSelected = false;
        })
        // check language
        this.$set(subNavItem, 'isSelected', !subNavItem.isSelected)
        this.$forceUpdate();
    }
}