Vue/vant——编辑按钮效果实现

这里不建议使用本地存储的方式存储编辑中的值，可能会导致传参为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个字符即可，也就是所谓的北京市/北京市（含头不含尾）

 效果如下：