javascript - vue实现当前li动态添加class的问题

问题描述

问 题

<!-- 模板 -->

<template>

<div>
    <ul>
        <li v-for="(item,$index) in items"  @click="selectStyle (item, $index) " :class="{'active':item.active,'unactive':!item.active}" >
            {{item.select}} 
            <span class="icon" v-show="item.active">当我是图标</span>
        </li>
    </ul>
</div>

</template>

<script>
    export default{
        data(){
            return {
                active: false,
                items: [
                        {select:'第一行'},
                        {select:'第二行'},
                        {select:'第三行'},
                        {select:'第四行'},
                ]
            }
        },
        methods: {
            selectStyle (item, index) {
                this.$nextTick(function () {
                      this.items.forEach(function (item) {
                        item.active = false;
                    });
                    item.active = true;
                    console.log(item.active);
                });
            }
        }
    }
</script>

<style>

.active{
    color:red;
}
.unactive{
    color:#000;
}
.icon{
    float: right;
    font-size:12px;
}

</style>

为什么这样实现不了效果，哪里出错了吗？

解决方案

item.active = false;
这种改用
Vue.set(this.items[index],active,false)
这种形式试一下。

---

methods: {
    selectStyle(item, index) {
        this.$nextTick(function() {
            this.items.forEach(function(item) {
                Vue.set(item,'active',false)
            });
            Vue.set(item,'active',true)
            console.log(item.active);
        });

---

避开 Vue 不能检测属性被添加的限制

这篇关于javascript - vue实现当前li动态添加class的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！