我有一个概述页面，人们可以在其中看到结果。他们可以通过单击编辑按钮来更改该值。通过单击编辑按钮，您将被导航到另一个页面，您可以在其中更改值。如果您更改了值，您将返回概览页面。但我的问题是我传递的道具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