Is there a question about the immediate option for vue watch listeners? O_0?!!

The code in

watch is very simple. A request takes data
sets the immediate to enter the page and executes 

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

this is what the data looks like.



Why can"t I get the transfer here?
is the rendering performed before getting the data?
where should I change?

Nuxt.js vue.js javascript
May.05,2022

you should be calling something asynchronous. Until the operation is completed, you can't get the result

it should be too early for dom operation. Try this.
add a 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>

if you have any more questions, contact me in time

Previous: Does the vue-element-admin tree table accept json data display correctly?

Next: When Mongoose creates a new document, the default value of the document's Mixed type field cannot be inserted into the database

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu