使用 v-if 和 v-else 动态更改 nativescript-vue 中的组件答案

【问题标题】：using v-if and v-else for dynamically change the component in nativescript-vue使用 v-if 和 v-else 动态更改 nativescript-vue 中的组件
【发布时间】：2019-11-07 19:28:36
【问题描述】：

我想显示一些任务（如待办任务）和任务列表，而不需要在这些组件之间导航。（Task 和 TaskList 都是组件）。但是我找不到动态加载一个组件或另一个组件的正确方法。可以猜到，当用户点击列表中的某个项目时，他/她会在同一个主要组件中看到详细信息。

在主视图组件中，我做了类似的事情

<template>
<TabView ...>
    <GridLayout columns="*" rows="auto, *">
        <SegmentedBar row="0" col="0">
            <SegmentedBarItem title="Meine Aufträge" />
            <SegmentedBarItem title="Auftragspool" />
        </SegmentedBar>

        <GridLayout row="1">
            <component v-for="component in componentsArray"  
            v-show="component === currentComponent" 
           :is="component" v-bind:key="component" 
           @changeComponent="changeValue" />

        </GridLayout>
</TabView>

<script>
    //...
    data() { //...
            return {
                currentComponent: "ServiceOrderList",
                componentsArray: ["ServiceOrderList", "TaskDetails"]
            };
        },
        methods: {
            changeValue(payload) {
                this.payload = payload
                this.currentComponent = "TaskDetails"
            }
</script>
  // another TabViews
</template>

这个正在工作（当我将静态字符串放入 TaskDetails 时），但我无法将有效负载发送到 TaskDetails，

但这种方法不起作用

<v-template if="currentComponent==='ServiceOrderList'">
                       <ServiceOrderList/>
                     </v-template>


                     <v-template if="currentComponent==='TaskDetails'">
                       <TaskDetails :data="this.payload"/>
                     </v-template>

那么我还有什么其他方法可以解决这个问题呢？谢谢

【问题讨论】：

您能分享一个 Playground 示例吗？

标签： nativescript nativescript-vue

【解决方案1】：

当我完成这类事情时，我会在 changeValue 中传递组件，例如 changeValue(component)。当您通过控制台将其注销时，有效负载是否符合您的预期？

另外，你的 sudo 代码中的这一点也让我有些困惑

</script>
  // another TabViews
</template>

这不是您编写组件的方式，对吧？我对单文件组件的理解是一个模板一个脚本标签？

【讨论】：

是的，这部分是写错了还是C/P错了，TabViews当然是在
是的，有效负载的console.log没有问题，我认为在nativescript-vue中我们不能使用带有模板标签的if和else。我把 if 和 else 放到了我的组件中，它工作了，比如<TaskDetails if="logic here">
@senko 所以我认为使用组件标签在玩了一段时间后在组件之间切换不起作用（NS playground here）
我过去取得的成功是在一个 v-for 循环中，根据传递的数据动态注册不同的组件。我想这就是为什么我认为你想要实现的目标会奏效，但是是的，我无法让它发挥作用。