如何切换 v-if

Question

我正在尝试在 Vue.js 导航栏中的两个组件之间切换。但是当我调用切换函数时，活动的值正在改变，但是显示的组件却没有改变。

这是我的App.vue

<template>
  <div>
    <Navbar :content="content" v-on:setActiveComponent="toggle"></Navbar>
    
    <Home v-if="active"></Home>
    <FormList v-if="!active"></FormList>
    <Footer></Footer>
    
  
  </div>
</template>

<script setup>

let active = ref(true);

function toggle() {
  console.log(active)
  active = !active;
}

const content = ["Home", "Neues Formular erstellen", "Formular laden"];
</script>

这是我的 Navbar.vue

<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-red">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" @click="active = !active" >{{ props.content[0] }}</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" @click="$emit('setActiveComponent')">{{ props.content[1] }}</a>
        </li>
      </ul>
    </div>
  </nav>
</template>

Answer 1

active.value = !active.value,需要添加(.value)