关于vant的地址编辑AddressEdit注意事项

第一次使用vantui做项目，写到地址编辑这里，遇到了一些问题，网上不容易找到，在这里总结一下。
官网中给的文档是这样的

<van-address-edit
  :area-list="areaList"
  show-postal
  show-delete
  show-set-default
  show-search-result
  :search-result="searchResult"
  :area-columns-placeholder="['请选择', '请选择', '请选择']"
  @save="onSave"
  @delete="onDelete"
  @change-detail="onChangeDetail"
/>

import { Toast } from 'vant';

export default {
  data() {
    return {
      areaList,
      searchResult: [],
    };
  },
  methods: {
    onSave() {
      Toast('save');
    },
    onDelete() {
      Toast('delete');
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: '黄龙万科中心',
            address: '杭州市西湖区',
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
  },
};

首先说一下searchResult这个功能，主要显示下方，如图所示的功能，可以自己根据情况，选择要或者不要，不要的话，删除对应的代码就行

我遇到的第一个问题，会发现点击地区，没有数据，这时候，你需要吧数据加进来。

如图所示，官方这里告诉你，需要用import引入，但是，注意我用横线画出来的那个，首先需要你去安装一下这个，官方这里给的是yran，实际情况，根据你项目的情况，如果是用yran创建的项目。直接使用，如果是用npm创建的项目，需要你改为npm add @vant/area-data(也就是说，吧yran换成npm)。
安装时记得先关闭项目再安装，切记。

接下来，说一下我遇到的另外个问题

一切都正常了，然后去打印，用的是这里

onSave() {
	Toast('save');
    console.log(this)
},

这里打印this，但是 始终无法获取到页面输入的数据，也就是在这里卡了很久，中间试过各种方式，当时都准备去看页面，每个input的class名字，然后挨个获取value值。但是，最后吧这个解决了，方法也是很简单

onSave(val) {
	console.log(val)
}

这样就可以获取到页面输入的所有值了。
很简单吧，但是，就这个，我弄了一个多小时，官方文档对新人不是太友好。