有关于vue watch侦听器 immediate选项的一个问题？o_0?!!

Question

watch 里面的代码 很简单一个请求拿数据
设置 immediate 进入页面就执行

watch:{
        post:{
            handler(newValue,oldValue){
                P.FilterData({"type":this.post.project})
                .then((res)=>{
                    this.FilterData = res.data
                })
            },
            immediate: true,
            deep:true,
        },
    },

数据就是这个样子。。。

<div class="select">
    <span><i style="color:red">*</i>项目求购</span>
    <Select v-model="post.transfers" style="width:300px">
        <Option v-for="item in FilterData.transfers" :value="item.name">{{ item.name }}</Option>
    </Select>
</div>

报出这个错误？！

为什么我这里的transfer无法取到？
使因为渲染在拿到数据之前执行了么？
我该改动哪里呢？

Answer 1

应该是dom操作太早了，试试这样呢
加一个v-if

<template>
  <div class="select">
    <span><i style="color:red">*</i>项目求购</span>
    <Select v-model="post.transfers" style="width:300px" v-if="dataLoaded">
      <Option v-for="item in FilterData.transfers" :value="item.name">{{ item.name }}</Option>
    </Select>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      dataLoaded: false
    };
  },
  watch: {
    post: {
      handler(newValue, oldValue) {
        P.FilterData({ type: this.post.project }).then(res => {
          this.dataLoaded = true;
          this.FilterData = res.data;
        });
      },
      immediate: true,
      deep: true
    }
  }
};
</script>

如果还有问题，及时找我

Answer 2

你调用的应该是个异步的东西吧，再操作未完成之前，你是获取不了结果的