[英]how to pass value of selected value in select option to onchange function in methods vuejs?
I have a problem passing the selected option value id from select option to onchange function in methods.我在将选定选项值 id 从选择选项传递到方法中的 onchange 函数时遇到问题。 What i want to achieve here everytime i change select value in select option i would like to store the selected value to v-model=choosed and pass that value to methods onchange that choosed = item.id.每次我在选择选项中更改选择值时,我想在这里实现什么我想将所选值存储到 v-model=choosed 并将该值传递给方法 onchange that selected = item.id。
Here is my function in DeviceController to fetch devices:这是我在 DeviceController 中获取设备的函数:
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 function from method to get devices{} data from DeviceController:这是从 DeviceController 获取设备数据的方法中的函数:
getDevices() {
axios.get(`/api/devices`)
.then(response => {
this.devices = response.data;
});
},
Here is my select option code:这是我的选择选项代码:
<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>
Here is my choosed v-model and devices json which devices that item.id came from in data:这是我在数据中选择的 v-model 和设备 json,item.id 来自哪些设备:
export default {
data() {
return {
devices: {},
choosed: null,
}
},
Here is my onChange function in method:这是我在方法中的 onChange 函数:
onChange: function(){
this.choosed = this.item.id;
},
Try this... https://codesandbox.io/s/vue-2-playground-forked-8yeqkx?file=/src/App.vue试试这个... https://codesandbox.io/s/vue-2-playground-forked-8yeqkx?file=/src/App.vue
<template>
<div id="app">
<select
class="form-select form-select-lg mb-3"
v-model="choosed"
>
<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>
<p>Selected id: {{ choosed }}</p>
</div>
</template>
<script>
const devices = async () => {
await new Promise((r) => setTimeout(r, 2000));
return [
{
id: 0,
device_name: "Device A",
},
{
id: 1,
device_name: "Device B",
},
{
id: 2,
device_name: "Device C",
},
];
};
export default {
name: "App",
data() {
return {
choosed: null,
devices: [],
};
},
async mounted() {
this.$set(this, "devices", await devices());
},
};
</script>
Try this.尝试这个。
<template>
<div id="app">
<select
class="form-select form-select-lg mb-3"
@change="onChange($event)"
>
<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>
<p>Selected id: {{ choosed }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
choosed: null,
devices: [
{
id: 1,
device_name: 'iphone'
},
{
id: 2,
device_name: 'android'
}
],
};
},
methods: {
onChange: function (event) {
this.choosed = event.target.value
}
}
};
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.