Vue.js中v-if控制组件切换失效问题求助

核心问题分析 #

1. 响应式变量修改错误：App.vue中用ref创建的active变量，直接通过active = !active赋值会丢失响应式绑定——ref对象必须通过.value属性访问和修改内部值，否则变量会从响应式对象变为普通布尔值，导致视图无法感知变化。
2. Navbar组件状态不同步：
   • 第一个导航项的点击事件操作了未定义的局部active变量，没有触发父组件的状态切换；
   • 导航项的active类名固定添加，未根据父组件状态动态切换。

修复后的代码 #

App.vue

<template>
  <div>
    <!-- 给Navbar传递active状态，用于导航项高亮 -->
    <Navbar :content="content" :active="active" @setActiveComponent="toggle"></Navbar>
    
    <!-- 用v-else简化条件判断 -->
    <Home v-if="active"></Home>
    <FormList v-else></FormList>
    <Footer></Footer>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// 请确保已导入Navbar、Home、FormList、Footer组件

let active = ref(true);

function toggle() {
  // 通过.value修改ref变量的值
  active.value = !active.value;
  console.log(active.value);
}

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">
        <!-- 动态绑定active类名，根据父组件传递的active状态 -->
        <li class="nav-item" :class="{ active: active }">
          <a class="nav-link" @click="$emit('setActiveComponent')">{{ content[0] }}</a>
        </li>
        <li class="nav-item" :class="{ active: !active }">
          <a class="nav-link" @click="$emit('setActiveComponent')">{{ content[1] }}</a>
        </li>
      </ul>
    </div>
  </nav>
</template>

<script setup>
// 定义组件接收的props
const props = defineProps({
  content: {
    type: Array,
    required: true
  },
  active: {
    type: Boolean,
    required: true
  }
});
</script>

关键修复点说明 #

• 响应式变量操作：所有对ref创建的变量的修改，必须通过.value属性进行，这是Vue 3组合式API中保持响应式的核心规则。
• 父子组件状态同步：通过props将父组件的active状态传递给Navbar，实现导航项的高亮切换；通过$emit触发父组件的toggle函数，完成状态更新。
• 简化条件判断：用v-else替代v-if="!active"，让模板逻辑更简洁。

内容的提问来源于stack exchange，提问作者Jakob Kovacs