您需要为每个可单击项指定某种标识符，并将其设置为data属性。

data() {
  return { active: null }
}

和列表项中（例如）

<li @click="active = 'portfolio'"
    class="navbar__menu--item" 
    :class="{active:active === 'portfolio'}">

在本例中，标识符是 “portfolio”，但也可以是任何值，只要您对每个项目使用唯一的值。

你可以保留一个链接对象，并处理每个项目上的点击。

data() {
  return {
    links: [
      {
        title    : 'Portfolio',
        to       : '/portfolio',
        isActive : false,
        location : 'first',
      },
      {
        title    : 'Stocks',
        to       : '/stocks',
        isActive : false,
        location : 'first',
      },
      {
        title    : 'End Day',
        to       : '#',
        isActive : false,
        location : 'second',
      },
      {
        title    : 'Save / Load',
        to       : '#',
        isActive : false,
        location : 'second',
      },
    ]
  };
},
methods: {
  handleNavClick(item) {
    this.links.forEach(el, () => {
      el.isActive = false;
    });

    item.isActive = true;
  }
},

我在vue3中这样做。模板是：

<li
  v-for="(title, index) in titles"
  class="title"
  :key="index"
  :class="{ active: active === index }"
  @click="updateActive(index)"
>
   {{ title }}
</li>

剧本是

<script lang="ts" setup>
import { ref } from "vue"
const titles = ["title1","title2","title3"]
const active = ref(-1)

function updateActive(val: number) {
  active.value = val
}
</script>

如果有多个ul =〉，请使用title代替index。例如：

<ul>
                <div>
                    Applicants
                </div>
                <li
                    v-for="(title, index) in applicantMenuTitles"
                    :key="index"
                    :class="{ active: active === title }"
                    @click="updateActive(title)"
                >
                    {{ title }}
                    <div
                        v-if=" active === title "
                        class="cursor"
                    />
                </li>
            </ul>
            <ul>
                <div>
                    Offices
                </div>
                <li
                    v-for="(title, index) in officeMenuTitles"
                    :key="index"
                    :class="{ active: active === title }"
                    @click="updateActive(title)"
                >
                    {{ title }}
                    <div
                        v-if=" active === title "
                        class="cursor"
                    />
                </li>
            </ul>

和脚本：

...
const active = ref('')

function updateActive(title: string) {
    active.value = title
}