Vue-JS对象get API未使用对象数组填充选择

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

使用Promise：

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

使用async/await:

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