использование v-if и v-else для динамического изменения компонента в nativescript-vue - PullRequest
Новая
       19

использование v-if и v-else для динамического изменения компонента в nativescript-vue

0 голосов
/ 07 ноября 2019

Я хочу показать некоторые задачи (например, задачи) и список задач без навигации между этими компонентами. (И 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>

Так какими еще способами я могу попытаться решить эту проблему? Спасибо

1 Ответ

0 голосов
/ 07 ноября 2019

Когда я это делаю, я передаю компонент в changeValue как changeValue (component). Была ли полезная нагрузка ожидаемой, когда консоль вышла из системы?

Кроме того, этот бит в вашем коде sudo слишком меня смущает 

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

это не то, как вы пишете компонентыправильно? Мое понимание отдельных файловых компонентов было то, что они имеют один шаблон и один тег сценария?

...