vant组件中addressList和addressEdit组件如何实现添加数据
<template>
<div>
<van-nav-bar
title="我的地址"
left-text="返回"
left-arrow
@click-left="onClickLeft"
/>
<van-address-list
v-model="chosenAddressId"
:list="list"
:disabled-list="disabledList"
disabled-text="以下地址超出配送范围"
default-tag-text="默认"
@add="onAdd"
@edit="onEdit"
/>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data() {
return {
chosenAddressId: "1",
list: [
{
id: "1",
name: "张三",
tel: "13000000000",
address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
isDefault: true,
},
{
id: "2",
name: "李四",
tel: "1310000000",
address: "浙江省杭州市拱墅区莫干山路 50 号",
},
{
id: "3",
name: "王五",
tel: "13132780000",
address: "山西省晋中市莫干山路 50 号",
},
],
disabledList: [
{
id: "3",
name: "王五",
tel: "1320000000",
address: "浙江省杭州市滨江区江南大道 15 号",
},
],
};
},
computed:{
...mapState("addressmodule",["name","tel","addressDetail","isDefaultL"]),
},
methods: {
onAdd() {
this.$router.push('/user/addressedit')
},
onEdit(item, index) {
this.$router.push('/user/addressedit',)
console.log(item,index);
},
onClickLeft() {
this.$router.go(-1)
},
},
};
</script>
<style>
</style>
我通过vuex获取到数据如何将数据添加进vant组件中的list列表渲染在页面上