axios 在vuejs中获取后加载组件

axzmvihb  于 2023-08-04  发布在  iOS
关注(0)|答案(2)|浏览(122)

我正在尝试使用axios使用一个API。
这是我到现在为止的代码:

<select>
    <option v-for="value in values"> value.name </option>
</select>

   // js
   data(){
        values: [],
   },
   created() {
        this.getData();
   },

   methods: {
       getData: () => {
          axios.get('url')
          .then(res => {
              this.value = res.data.dados;
              console.log(res.data.dados);
          })
          .catch(error => {
               console.log(error);
          });
   }
}

字符串
promise的console.log工作正常,但没有呈现包含数据的选项。这可能是因为我的select组件在'getData()'之前呈现。我该怎么解决?

eivnm1vs

eivnm1vs1#

只要放一个加载处理程序。

<select v-if="loaded">
  <option v-for="value in values"> value.name </option>
</select>

   // js
   data(){
        values: [],
        loaded: false,
   },
   created() {
        this.getData();
   },

   methods: {
       getData: () => {
          axios.get('url')
          .then(res => {
              this.value = res.data.dados;
              this.loaded = true;
          })
          .catch(error => {
               console.log(error);
               this.loaded = true;
          });
   }
}

字符串

nwlls2ji

nwlls2ji2#

你在this.value上有一个错字,它应该是this.values。如果不起作用,使用this.$forceUpdate()强制重新呈现组件

<select>
    <option v-for="value in values">{{ value.name }}</option>
</select>

   // js
   data(){
        values: [],
   },
   created() {
        this.getData();
   },

   methods: {
       getData: () => {
          axios.get('url')
          .then(res => {
              this.values = res.data.dados; // change value to values
              console.log(res.data.dados);
              this.$forceUpdate(); // add forceUpdate
          })
          .catch(error => {
               console.log(error);
          });
   }
}

字符串

相关问题