vant 里面的picker组件请求地址的时候第二数据拿到了但是列表不渲染?

Aloe
  • 3
新手上路,请多包涵

<van-popup v-model="showPicker" round position="bottom">

  <van-picker
    show-toolbar
    value-key="cityName"
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"
    @change="search"
  />
</van-popup>

调用接口请求地区数据,初始化列表
created() {

// 获取省
this.axios
  .post("")
  .then((response) => {
    let data = response.data;
    this.columns[0].values = data.resultInfo;
  })
  .catch((error) => {
    console.log(error);
  });
// 获取市
this.axios
  .post("", {
    parentCode: "110000",
  })
  .then((response) => {
    let data = response.data;

    this.columns[1].values = data.resultInfo;
  })
  .catch((error) => {
    console.log(error);
  });
// 获取区
this.axios
  .post("", {
    parentCode: "110000",
  })
  .then((response) => {
    let data = response.data;
    this.columns[2].values = data.resultInfo;
  })
  .catch((error) => {
    console.log(error);
  });

},
第一列数据改变的时候
methods: {

search(picker, value, index) {
  console.log(value[0], "选中的省");
  console.log(value[1], "选中的市");
  console.log(value[2], "选中的区");
  // 获取市
  this.axios
    .post("", {
      parentCode: value[0].cityCode
    })
    .then(response => {
      let data = response.data;

      this.columns[1].values = data.resultInfo;
    })
    .catch(error => {
      console.log(error);
    });
  // 获取区
  this.axios
    .post("", {
      parentCode: value[1].cityCode
    })
    .then(response => {
      let data = response.data;
      this.columns[2].values = data.resultInfo;
    })
    .catch(error => {
      console.log(error);
    });
  this.$emit("input", this.value);
},
onConfirm(e) {
  console.log(e, "确认");
  this.showPicker = false;
  console.log(this.columns);
  // this.value.area = e[0].cityName + e[1].cityName + e[2].cityName;
}

}

image.png

回复
阅读 270
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏