Как динамически отображать компоненты vuejs на астро-странице с использованием глобальной переменной?

Question

Я разрабатываю форму в несколько шагов на Astro. Для этого я использую компоненты Vuejs (по одному на каждый шаг).

Каждый шаг может быть подтвержден кнопкой, которая позволяет перейти к следующему. Я попытался создать глобальную переменную, которая увеличивается на каждом шаге с помощью кнопки. В зависимости от значения этой переменной должен отображаться соответствующий компонент. В настоящее время значение переменной обновляется функцией, но новое значение не учитывается в index.astro.

Глобальная переменная:

      export let newValue = 0
export function nextComponent(num){
    newValue = num  
}

мой index.astro:

      ---
import Layout from "../layouts/Layout.astro";
import Vehicule from "../components/vehicule/vehicule.vue";
import Owner from "../components/vehicule/owner.vue";
import Informations from "../components/vehicule/informations.vue";
import Header from "../components/header.vue";

import {newValue} from "../assets/js/globalVariable.js"

---

<Layout title="Welcome to Astro.">
    <main>
        
        <Header client:load />
        {newValue === 0 && <Vehicule client:load />}
        {newValue === 1 && <Owner client:load />}
        {newValue === 2 && <Informations client:load />}
        
    </main>
</Layout>

Answer 1

Лучший способ, вероятно, состоит в том, чтобы переместить все эти компоненты Vue в один компонент-оболочку Vue, чтобы вы могли воспользоваться преимуществами способов обработки интерактивности Vue.

может выглядеть примерно так с одним гидратированнымкомпонент:

      ---
import Layout from "../layouts/Layout.astro";
import Header from "../components/header.vue";
import Steps from "../components/vehicule/steps.vue";
---

<Layout title="Welcome to Astro.">
    <main>
        <Header client:load />
        <Steps client:load />
    </main>
</Layout>

Затем вы должны использовать компоненты транспортного средства, владельца и информации внутри этого менеджера отдельных шагов.