这里不建议使用本地存储的方式存储编辑中的值,可能会导致传参为null
可以使用路由传参的方式把参数传递给address.vue页面
看下面的代码:
Detail.vue页面中的编辑按钮事件下的路由传参
item为对象,index为索引。根据索引获取每个值。
edit(item, index) { console.log(item); let obj = { index: index, item: item, }; console.log("编辑" + index); this.$router.push({ path: "/address", query: { edit: JSON.stringify(obj), }, }); },
在address.vue 页面通过this.$route.query在mouted进行接收
if (this.$route.query.edit) { var con = JSON.parse(this.$route.query.edit); console.log(con); }
实现效果如下:(当点击编辑按钮后触发的事件)
if (this.$route.query.edit) { var edit = JSON.parse(this.$route.query.edit); console.log(edit); this.form = edit.item }
把得到的是数据渲染到之前的form对象中,直接替换即可显示成功!
form结构如下:
form: { text: "", // 用户名 tel: "", // 电话 email: "", //邮政编码 address: "", //详细地址 value: "", // 省/市/区 },
之后将detail.vue中的“配送”改为当前选择的地址
<span> 配送: </span> <span v-if="pathList.length >0"> <span style="color:red;font-weight:900">{{pathList[0].value.slice(0,7)}}</span> 现配 </span> <span v-else>点击添加新地址</span>
这句话的意思为:如果pathList这个列表中没有数据,那么则就变为点击添加新地址,如果这个列表中有数据,那么就显示前7个字符为当前渲染的数据
地址栏的结构如下:
在插件中转换成了/的格式的字符串,所以直接得到前7个字符即可,也就是所谓的北京市/北京市(含头不含尾)
效果如下: