Vue-JS Object get API未使用对象数组填充select

Question

Vue-JS Object get API未用对象数组填充select。

这是我的数据：

data() {
return {
  elementsReport: [],
  types: [],
  drivers: [],
  disabledCard: [],
  driver: '',
  type: '',
  initialDate: '',
  finalDate: '',
};

}，

这是我的“坐骑”：

mounted() {
this.getListDriversAPI();
this.getReportTypesAPI();

}，

这是我的函数api：

async getListDriversAPI() {
  const _this = this;
  await axios
    .get("/web-api/drivers/" + _this.companie_id)
    .then(({ data }) => {
      _this.drivers = data; // Is Array
      console.log(_this.drivers);
    });
},

这是我的选择：

              <select
                v-model="driver"
                class="form-control"
                data-size="5"
                data-live-search="true"
                data-width="100%"
                name="driver"
                required
                id="driver"
              >
                <option disabled value="0">Escolha uma opção</option>
                <option v-for="driver in drivers" :value="driver.id">{{driver.name}}</option>
              </select>

Answer 1

我认为您不应该将await与.then()一起使用

也许试试看：

async getListDriversAPI() {
  const response = await axios
    .get("/web-api/drivers/" + _this.companie_id);
  this.drivers = response.data;
  console.log(this.drivers);
}

Answer 2

使用承诺：

getListDriversAPI() {
  axios.get(`/web-api/drivers/${this.companie_id}`)
    .then(data => {
      this.drivers = data;
      console.log(this.drivers);
    });
}

使用异步/等待：

async getListDriversAPI() {
  const { data } = await axios.get(`/web-api/drivers/${this.companie_id}`)
  this.drivers = data;
  console.log(this.drivers);
}