Vue 3 中为多个独立 v-list 实现活动样式，仅允许一个列表项处于活动状态

vue.js

2024-03-14 04:34:57

在 Vue 3 中为多个独立 v-list 实现活动样式

问题：v-list 中无法正确设置活动样式

在 Vue 3 中，使用 v-list 组件时，如果存在多个独立的导航 v-list，无法让 active-class 在这些列表项上正常工作。目标是仅允许一个列表项处于活动/选中状态。

解决方法：使用外部响应式变量

为了解决这个问题，需要使用一个外部响应式变量来跟踪所有 v-list 的活动状态。然后，可以在每个 v-list 组件中使用此变量来设置 active-class。

步骤：

在父级组件中，创建一个响应式变量（例如 activeItem）来存储当前活动项的值。
在每个 v-list 组件中，使用 setup() 函数解构父级组件传递的 activeItem 变量。
在 v-list 中，使用 :active-class 属性，并设置一个计算属性，将 activeItem 值与列表项的值进行比较，从而决定是否应用活动样式。

代码示例

父级组件：

<script>
import { ref } from 'vue'

export default {
  setup() {
    const activeItem = ref(null)

    return { activeItem }
  }
}
</script>

v-list 组件：

<template>
  <v-list nav :active-class="{ active: activeItem.value === item.value }">
    <v-list-item v-for="item in items" :key="item.value" @click="setActiveItem(item)">...</v-list-item>
  </v-list>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  props: ['item', 'activeItem'],

  setup(props) {
    const activeItem = ref(null)

    watch(() => props.activeItem, (newValue) => {
      activeItem.value = newValue
    })

    return { activeItem }
  }
}
</script>