vue中includes失效问题，怎么解决？

  • Z时代
  • 2024-03-14
  • 分类：IT

vue中includes失效问题，怎么解决？
vue中includes失效问题，怎么解决？

<el-tab-pane label="KYC标签" name="first">
                    <template v-for="item in labelList">
                        <div class="title" :style="labelList[0] ? '' : 'margin-top: 12px;'">{{item.name}}</div>
                        <div class="qian">
                            <div class="tag">
                                <span class="Classification"
                                v-for="(k, index) in item.detailArr"
                                :key="index"
                                :class="{active : tabIndex.includes(k) }"
                                @click="oncheck(k)">
                                    {{k.name}}{{tabIndex.includes(k)}}</span>
                            </div>
                        </div>
                    </template>
                </el-tab-pane>

oncheck(item){

        if (this.tabIndex.includes(item)) {
            //includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
            //filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素：生成新的数组
            this.tabIndex = this.tabIndex.filter(function(ele) {
                return ele != item
            })
        } else {
            this.tabIndex.push(item)
        }
    },

回答：

猜测你的 tabIndex 是一个对像数组，使用 includes 去匹配的时候不会认为是同一个的。

添加的时候还会因为是浅拷贝只是拷贝了内存地址的指向，所以可以匹配上，
如果后续回填的时候是分别填入的，那么就不会被认为是同一个。

一个演示代码：

const a = {}
const b = {}
console.log('a === b', a === b) 
console.log('a == b', a == b) 
// a === b false
// a == b false
console.log('a === a', a === a) 
console.log('a == a', a == a) 
// a === a true
// a == a true

所以最好在一些例如说元素激活的时候，最好是把元素的唯一 key 收集起来，在判断中使用key 键去匹配。
比如说

const activeKeys = ['key1', 'key2'];
activeKeys.includes(item.key)
````

回答：

把includes里的k对象改成以对象中的id做对比（k.id)

以上是 vue中includes失效问题，怎么解决？ 的全部内容， 来源链接： utcz.com/p/933041.html

回到顶部