Vue/vant——编辑按钮效果实现
这里不建议使用本地存储的方式存储编辑中的值,可能会导致传参失败可以使用路由传参的方式把参数传递给address.vue页面看下面的代码:Detail.vue页面中的编辑按钮事件下的路由传参item为对象,index为索引。根据索引获取每个值。edit(item, index) {console.log(item);let obj = {index: index,item: item,};
·
这里不建议使用本地存储的方式存储编辑中的值,可能会导致传参为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个字符即可,也就是所谓的北京市/北京市(含头不含尾)
效果如下:
更多推荐
已为社区贡献20条内容
所有评论(0)