Передача измененных реквизитов в $ navigateBack

У меня есть обзорная страница, на которой люди могут видеть результаты. У них есть возможность изменить это значение, нажав кнопку редактирования. Нажав на кнопку редактирования, вы перейдете на другую страницу, где можете изменить значение. Если вы изменили значение, вы вернетесь на страницу обзора. Но моя проблема в том, что реквизиты, которые я передаю с 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() мне не очень понятны, вы можете передавать параметры в функции. Но что это за варианты?

Демо

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

Решение благодаря Manoj

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


person Steven    schedule 05.11.2018    source источник
comment
Можете ли вы создать живой демонстрационный пример (например, jsFiddle или еще)?   -  person Sajib Khan    schedule 05.11.2018
comment
@SajibKhan Я сделаю для вас игровую площадку с нативными скриптами.   -  person Steven    schedule 05.11.2018
comment
вроде отлично, жду ...!   -  person Sajib Khan    schedule 05.11.2018
comment
@SajibKhan Извините, что я так долго говорю вам, play.nativescript.org/ ? template = play-vue & id = 5OsNCC & v = 2 Прошу прощения за плохой CSS   -  person Steven    schedule 05.11.2018


Ответы (1)


props не поддерживаются в обратной навигации, компонент уже существует. Есть и другие варианты, которые вы можете попробовать,

  1. Передайте объект в props при вызове $navigatingTo. Поскольку объекты передаются по ссылке, он должен обновлять фактический источник по мере внесения изменений в новый компонент, для пример.
  2. Использовать шину событий
  3. Vuex также работает
person Manoj    schedule 05.11.2018
comment
Спасибо, что помогли мне! - person Steven; 05.11.2018
comment
Вроде больше не работает? Я получил сообщение об ошибке: Избегайте изменения свойства напрямую, так как значение будет перезаписано всякий раз, когда родительский компонент повторно выполняет рендеринг. - person drhanlau; 02.09.2020
comment
Поделитесь образцом игровой площадки, где можно воспроизвести проблему. - person Manoj; 02.09.2020