I'm facing an issue with passing the selected option value id from a select option to an onchange function in my methods. My goal is to store the selected value in the v-model "choosed" every time the user changes the select option, and then pass that value to the onchange method so that choosed = item.id.
Here is the function in my DeviceController to fetch devices:
public function devices()
{
try {
$devices = Device::orderby('id', 'asc')->get();
return response()->json($devices);
} catch (\Throwable $th) {
return response()->json(['message' => $th->getMessage()]);
}
}
Here is the method to get device data from the DeviceController:
getDevices() {
axios.get(`/api/devices`)
.then(response => {
this.devices = response.data;
});
},
Here is the code for my select option:
<select class="form-select form-select-lg mb-3" v-model="choosed" @change="onChange()">
<option :value="null">Choose Device to Send SMS</option>
<option v-for="item in devices" :key="item.id" :value="item.id" >{{ item.device_name }}
</option>
</select>
My choosed v-model and devices JSON data, which the item.id value is retrieved from, are as follows:
export default {
data() {
return {
devices: {},
choosed: null,
}
},
This is my onChange function in the method:
onChange: function(){
this.choosed = this.item.id;
},