如何將選擇選項中選定值的值傳遞給方法vuejs中的onchange函數？

Question

我在將選定選項值 id 從選擇選項傳遞到方法中的 onchange 函數時遇到問題。 每次我在選擇選項中更改選擇值時，我想在這里實現什么我想將所選值存儲到 v-model=choosed 並將該值傳遞給方法 onchange that selected = item.id。

這是我在 DeviceController 中獲取設備的函數：

public function devices()
{   
    try {
        $devices = Device::orderby('id', 'asc')->get();
        return response()->json($devices);
    } catch (\Throwable $th) {
        return response()->json(['message' => $th->getMessage()]);
    }
}

這是從 DeviceController 獲取設備數據的方法中的函數：

    getDevices() {
        axios.get(`/api/devices`)
          .then(response => {
              this.devices = response.data;
          });
    },

這是我的選擇選項代碼：

<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>

這是我在數據中選擇的 v-model 和設備 json，item.id 來自哪些設備：

 export default {
        data() {
            return {
                devices: {}, 
                choosed: null,
            }
        },

這是我在方法中的 onChange 函數：

        onChange: function(){
            this.choosed = this.item.id;
        },

Answer 1

試試這個... 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>

Answer 2

嘗試這個。

<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>