Nuxtjs Vue3 reactivity based on a flag

Question

I created a simple Page in Nuxt which would use a boolean variable to switch between a Detail component and a Form component.

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

let editMode = 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);
  editMode = false;
}

async function setEditMode() {
  editMode = 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>

Data is fetched correctly. The problem is that, even though I change the editMode value from false to true (and I printed to console the value correctly), the view does not change from CustomerDetail to CustomerForm. It seems that the variable is not reactive and is not re-evaluated.

Could you please point me to the right direction?

Answer 1

To declare a reactive variable you must declare your variable with the help of ref or reactive functions.

Do like this const editMode = ref(false)

Later in the script setup to change the value of editMode editMode.value = true