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