element-plus的tabs切换位置视图不更新

1、问题:在element-plus的tabs栏里切换位置,但是数据更新后视图不更新,删除和新增是可以更新的

如下例子

<script setup >
let tabs = reactive(['first', 'second', 'third', 'fourth'])
let activeName = ref('first')
const handleClick = (tab, event) => {
    tabs.reverse()
   console.log(tabs)
}
</script>

<template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="item in tabs" :key="item" :label="item" :name="item">
        </el-tab-pane>
    </el-tabs>
</template>

2、解决:去掉:key=“item”就行了

<script setup >
let tabs = reactive(['first', 'second', 'third', 'fourth'])
let activeName = ref('first')
const handleClick = (tab, event) => {
    tabs.reverse()
   console.log(tabs)
}
</script>

<template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="item in tabs" :label="item" :name="item">
        </el-tab-pane>
    </el-tabs>
</template>
posted @ 2023-03-12 15:14  Pavetr  阅读(800)  评论(0编辑  收藏  举报