在 vuejs 中获取后加载组件

Question

我正在尝试使用 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 工作正常，但未呈现带有数据的选项。 这可能是因为我的选择组件是在“getData()”之前呈现的。我该如何解决？

Answer 1

只需放置一个加载处理程序。

<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;
          });
   }
}

Answer 2

你在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);
          });
   }
}