Question

我有一个概述页面，人们可以在其中看到结果。他们可以通过单击编辑按钮来更改该值。通过单击编辑按钮，您将导航到另一个页面，您可以在其中更改值。如果更改了值，将返回到概述页面。但是我的问题是我使用this.$navigateBack()传递的道具在概览页面中没有更改。

概述页面

<template>
<Page class="confirmPage" actionBarHidden="true">
    <StackLayout>
        <Button class="back fas btn btn-db" :text="'\uf060 Route Details' | unescape" @tap="$navigateBack"></Button>
        <GridLayout columns="2*, 2*, 1*" rows="*, *, *" class="routeDetails">
            <Label row="0" col="0" class="centerIt" text="Ziekenhuis"></Label>
            <Label row="0" col="1" :text="$props.hospital"></Label>
            <Label row="0" col="2" class="fas btn btn-t-d btn-cr-sm" :text="'\uf303' | unescape" @tap="onEditHospital"></Label>

            <Label row="1" col="0" class="centerIt" text="Startpunt"></Label>
            <Label row="1" col="1" :text="$props.startpoint"></Label>
            <Label row="1" col="2" class="fas btn btn-t-d btn-cr-sm" :text="'\uf303' | unescape" @tap="onEditStartpoint"></Label>

            <Label row="2" col="0" class="centerIt" text="Bestemming"></Label>
            <Label row="2" col="1" :text="$props.endpoint"></Label>
            <Label row="2" col="2" class="fas btn btn-t-d btn-cr-sm" :text="'\uf303' | unescape" @tap="onEditEndpoint"></Label>
        </GridLayout>
        <Button class="confirm btn btn-b-db btn-r btn-t-w" @tap="log" text="BEVESTIG"></Button>
    </StackLayout>
</Page>
</template>

概述页面的脚本

<script>
import editChooseHospital from "../Edit/EditChooseHospital/EditChooseHospital";
    import editChooseStartpoint from "../Edit/EditChooseStartpoint/EditChooseStartpoint";
    import editChooseEndpoint from "../Edit/EditChooseEndpoint/EditChooseEndpoint";


    export default {
        props: ['hospital', 'startpoint', 'endpoint'],
        methods: {
            log : function (args){
              console.log(this.endpoint,this.hospital,this.startpoint);
            },
            onEditHospital: function (args) {
                this.$navigateTo(editChooseHospital, {
                    props: {
                        startpoint: this.startpoint,
                        endpoint: this.endpoint
                    }
                })
            },
        }
    }
</script>

编辑页面

<template>
    <Page class="manualInputPage" actionBarHidden="true">
        <FlexBoxLayout class="layout">
            <Button class="back fas btn btn-lb" :text="'\uf060' | unescape" @tap="$navigateBack"></Button>
            <SearchBar class="searchbar" :text="searchValue" hint="Search" textFieldBackgroundColor="white" @textChange="onTextChanged" @submit="onSubmit"></SearchBar>
            <ListView class="list-group" for="items in hospitals" @itemTap="onItemTap" separatorColor="transparent">
                <v-template>
                    <Label class="item" :text="items.name"></Label>
                </v-template>
            </ListView>
            <Label class="bottom-info"></Label>
        </FlexBoxLayout>
    </Page>
</template>

编辑页面的脚本

<script>
    export default {
        props: ['startpoint', 'endpoint'],
        methods: {
            onItemTap: function (args) {
                console.log(this.hospitals[args.index].name);
                this.searchValue = this.hospitals[args.index].name;
            },
            onTextChanged: function (args) {

            },
            onSubmit: function (args) {
                console.log(this.searchValue, this.startpoint, this.endpoint);
                this.$navigateBack({
                    props: {
                        hospital: this.searchValue,
                        startpoint: this.startpoint,
                        endpoint: this.endpoint
                    }
                })
            }
        }
    }
</script>

我不知道关于this.$navigateBack()的{{3}}是否可行，您可以在函数中传递选项。但是这些选择是什么？

演示

the docs

Manoj带来的解决方案

https://play.nativescript.org/?template=play-vue&id=5OsNCC&v=2

Answer 1

反向导航不支持

props，该组件已存在。您还可以尝试其他选择，

调用props时在$navigatingTo中传递对象。通过引用传递对象时，对于example，当您在新组件中执行更改时，它应该更新实际源。
使用事件总线
Vuex也可以使用

在$ navigateBack

演示

Manoj带来的解决方案

1 个答案: