(vuejs)未定义有轴子和类星体的阵列

Question

我遇到一个未定义的数组问题，而在Vuejs devTool中我看到它已满。以下是我对类星体所做的：当我点击我的更新按钮时，我想显示一个带有我行输入的q卡。所以我已经用axios发出了一个请求，并将响应放入数组中。但当我对数组执行console.log((操作时，我有"undefined"。

<template>
<div>
<div class="q-pa-sm q-gutter-sm">
<q-dialog v-model="show_dialog" v-bind:programmeEdit="programmeEdit">
<q-card>
<q-card-section>
<div class="text-h6">Add new item!</div>
</q-card-section>

<q-card-section>
<div class="row">
<q-input  v-model="programmeEdit.prg_libelle" label="prg_libelle"></q-input>
<q-input  label="id"></q-input>
<q-input  label="nom promotteur"></q-input>
<q-input  label="date commercialistion"></q-input>
<q-input  label="stock initial"></q-input>
<q-input  label="nombre tranche"></q-input>


</div>
</q-card-section>

<q-card-actions align="right">
<q-btn flat label="OK" color="primary" v-close-popup @click="" ></q-btn>
</q-card-actions>
</q-card>
</q-dialog>
</div>

<q-table title="Programme" :filter="filter" :data="programme.data" :columns="columns" row-key="name">
<template v-slot:top-right>
<q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
</template>

<template v-slot:body="props">
<q-tr :props="props">

<q-td key="prg_libelle" :props="props">{{ props.row.prg_libelle }}</q-td>
<q-td key="id" :props="props">{{ props.row.id }}</q-td>
<q-td key="nom_promotteur" :props="props">{{ props.row.act_libelle }}</q-td>
<q-td key="id_promotteur" :props="props">{{ props.row.id_promotteur }}</q-td>
<q-td key="date_commercialisation" :props="props">{{ props.row.tra_date_commercialisation }}</q-td>
<q-td key="stock_initial" :props="props">{{ props.row.tra_stock_initial }}</q-td>

<q-td key="nombre_tranche" :props="props">{{ props.row.nombre_tranche }}</q-td>
<q-td key="actions" :props="props">
<q-btn color="blue" label="Update" @click="getProgramme(props.row.id)" size=sm no-caps></q-btn>
<q-btn color="red" label="Delete"  @click="deleteItem(props.row)" size=sm no-caps></q-btn>
</q-td>
</q-tr>
</template>

</q-table>

</div>
</template> 

Vue.use(VueAxios, axios)
export default {

methods: {
},
data () {
return {
programmetoEdit:'',
show_dialog:false,
filter: '',
programme:{},
programmeEdit:{},
columns: [
{
name: 'prg_libelle',required: true, label: 'prg_libelle',align: 'left', field: 'prg_libelle' ,format: val => `${val}`, sortable: true },
{ name: 'id', align: 'center', label: 'id', field: 'id',  sortable: true },
{ name: 'nom_promotteur', align: 'center',label: 'nom_promotteur', field: 'act_libelle', },
{ name: 'id_promotteur', align: 'center',label: 'id_promotteur', field: 'id_promotteur', },
{ name: 'date_commercialisation', align: 'center',label: 'date_commercialisation', field: 'tra_date_commercialisation', },
{ name: 'stock_initial', align: 'center',label: 'stock_initial', field: 'tra_stock_initial', },
{ name: 'nombre_tranche', align: 'center',label: 'nombre_tranche', field: 'nombre_tranche', },
{ name: "actions", label: "Actions", field: "actions"},
]
}
},

created() {
axios.get("http://localhost:80/api/programme")
.then(response =>this.programme=response)
.catch(error=>console.log(error))
},
methods: {
getProgramme($id){
axios.get("http://localhost:80/api/programme/"+$id)
.then(response => this.programmeEdit=response.data);
this.show_dialog= !this.show_dialog;
this.programmeEdit.id=this.programmetoEdit;

}
},

}

当我想根据id检索查询时，我得到了一个未定义的。我正在阻止，我不知道为什么。非常感谢：(

Answer 1

如果您想从代码中记录它(例如.then承诺中(，您应该执行：

console.log(this.programmetoEdit);

此外，您所做的任务与Axios正在做的工作并行。之后不会，正如我猜你所期望的那样。

如果你想在this.programmeEdit=response.data部分之后发生，你应该把所有的东西都放在.then承诺中。

像这样(这将显示对话框同时加载数据/等待API响应(：

getProgramme ($id) {
axios.get("http://localhost:80/api/programme/" + $id)
.then(response => {
this.programmeEdit=response.data;
this.programmeEdit.id=this.programmetoEdit;
});
this.show_dialog= !this.show_dialog;
}

或者类似(这将显示对话框AFTER加载数据/等待API响应(：

getProgramme ($id) {
axios.get("http://localhost:80/api/programme/" + $id)
.then(response => {
this.programmeEdit=response.data;
this.programmeEdit.id=this.programmetoEdit;
this.show_dialog= !this.show_dialog;
});
}