Загрузка компонента после выборки в vuejs

Question

Я пытаюсь использовать API, используя ax ios.

Это мой код до сих пор

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

console.log обещания работает нормально, но параметры с данными не отображается. Вероятно, это связано с тем, что мой компонент select отображается перед 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);
          });
   }
}