Ant Design Vue实现导航栏点击后不处于选中状态

基于vue3

antd的导航栏默认选中是根据v-model:selectedKeys来绑定一个数组，数组里每个值对应每一个子菜单的key值，则通过监听这个值，改变时修改回去则可以实现标题所说的效果

先定义一个数组

<script setup lang="ts">

    const model = ref<string[1]>(["0"])


</script>

绑定导航栏

<a-menu mode="horizontal" v-model:selectedKeys="model">
  <a-menu-item key="1" @click="regetting">
    <template #icon>
    <up-circle-outlined />
    </template>
    上传文件
  </a-menu-item>
</a-menu>

为model数组添加一个监听函数

<script setup lang="ts">

    import { defineComponent,ref,reactive,watch } from 'vue'

    const model = ref<string[1]>(["0"])


    watch(model,(newQuestion, oldQuestion)=>{

        if(newQuestion[0].indexOf('1') > -1){

            model.value[0] = "0"

        }

    })

</script>

则就会实现一下的效果