使用 laravel vuejs 创建选择下拉列表

Question

我想使用 laravel vuejs 创建选择下拉列表，所以在控制器中我创建用于数据绑定以显示在 vue 上查看

public function get_data_dropdown()
{
$collection = IndukBelanja::get(['kode_rekening','uraian','id']);
foreach ($collection as $item) {
$inven[$item->id]  = $item->kode_rekening.'-'.$item->uraian;
}
return response()->json($inven ,200);
}

而这条路线

Route::get('get_data_dropdown', 'UserController@get_data_dropdown')->name('get_data_dropdown');

所以在 Vue 视图上，我为此绑定创建了这样的选择：

data(){
return{
inven:[],                   
}
},
created(){
axios.get('/users/get_data_dropdown').then((res)=>{
this.inven= res.data
//  console.log(res.data)
}).catch((err) => {
console.log(err)
});
},

在视图表单上，我创建这样的选择

<select  v-model="inven" id="koderek">
<option v-for="invent in inven" v-bind:value="invent.id">
{{invent}}
</option>
</select>  

但是这个选择不能显示任何东西，这个控制台日志没有错误，有人可以纠正我的代码吗？

Answer 1

您的服务器端代码似乎返回的是 JSON 对象，而不是数组。类似的东西

{
"itemId": "kode_rekening-uraian",
// etc
}

要在 Vue 中使用它，首先声明inven属性以匹配对象数据类型

data: () => ({
inven: {}
})

然后在您的模板中

<option v-for="(invent, id) in inven" :key="id" :value="id">
{{ invent }}
</option>

请参阅对象v-for