如何动态渲染vejs组件在astro页面使用全局变量?

Question

我正在Astro上开发一个表单。为此，我使用了Vuejs组件(每个步骤一个)。

每个步骤都可以通过一个按钮进行验证，该按钮允许转到下一个步骤。我试图创建一个全局变量，通过按钮在每一步递增。根据该变量的值，应该显示相应的组件。当前变量的值是由函数更新的，但是在index.astro

中不考虑新值。全局变量

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

我的指数。阿斯特罗:

---
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处理交互性的方式。

index.astro与单一水合<Steps />组分可能看起来像这样:

---
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>

然后在这个单步管理器中使用车辆、所有者和信息组件。