Create select dropdown using laravel vuejs

Question

I want to create select dropdown using laravel vuejs , so in controller i create for data binding to showing at view on 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);
}

and this route

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

so on vue view i create for this binding this select like this :

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

     },

and on view form i create select like this

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

but this select cant showing anything and this console log didnt have error , someone can correct my code ?

Answer 1

Your server-side code appears to be returning a JSON object, not an array. Something like

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

To use this in Vue, first declare the inven property to match the object data type

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

then in your template

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

See v-for with an Object