在$ navigateBack中传递更改的道具 [英] Passing changed props in $navigateBack

问题描述

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

I have a overview page where people can see there results. They have an option to change that value by clicking on the edit button. By clicking on the edit button you will be navigated to an other page where you can change the value. If you changed the value you will come back to the overview page. But my problem is the props I pass with this.$navigateBack() aren't changed in the overview page.

概述页面

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

我不知道是否可能

I don't know if it is possible the docs about this.$navigateBack() aren't very clear to me you can pass options in the function. But what are those options?

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

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

推荐答案

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

props are not supported in back navigation, the component already exists. There are other options you could try,

1. 在调用$navigatingTo时在props中传递对象.当对象通过引用传递时，它应在您在新组件中执行更改时更新实际源，例如

1. Pass an object in props when calling $navigatingTo. As objects are passed by reference, it should update the actual source as you perform changes in new component, for example.
2. Use event bus
3. Vuex also works

这篇关于在$ navigateBack中传递更改的道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！