Nuxt3中布尔变量切换组件无响应问题求助

• 核心问题：你定义的editMode是普通JavaScript变量，Vue的响应式系统无法追踪它的变化，因此修改值后视图不会自动更新。
• 解决方法：使用Vue的ref方法创建响应式变量，ref会对基本类型值进行包装，使其纳入Vue的响应式追踪体系。

修改后的完整代码如下：

<script setup>
definePageMeta({
  layout: "app",
});

// 用ref创建响应式布尔变量
const editMode = ref(false);

const { data: customer, pending } = await useAsyncData(async () => {
  const route = useRoute();
  const store = useCustomersStore();
  await store.fetchCustomer(route.params.id);
  return store.getCustomer;
});

async function updateCustomer(customer) {
  const route = useRoute();
  const store = useCustomersStore();
  await store.updateCustomer(route.params.id, customer);
  // 修改ref变量需通过.value属性
  editMode.value = false;
}

async function setEditMode() {
  // 修改ref变量需通过.value属性
  editMode.value = true;
}
</script>

<template>
  <div>
    <main>
      <div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
        <AppCustomerDetail
          v-if="customer && !editMode"
          :customer="customer"
          class="max-w-4xl"
          @edit="setEditMode"
        />
        <AppCustomerForm
          v-if="customer && editMode"
          :customer="customer"
          class="max-w-4xl"
          @submit="updateCustomer"
        />
        <div v-if="!pending && !customer">Error</div>
      </div>
    </main>
  </div>
</template>

补充说明：在模板中使用ref变量时无需添加.value，Vue会自动完成解包操作，因此模板里的!editMode和editMode写法保持不变即可。

内容的提问来源于stack exchange，提问作者Maurizio Bellemo