how to pass value of selected value in select option to onchange function in methods vuejs?

Question

I have a problem passing the selected option value id from select option to onchange function in methods. 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.

Here is my function in 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 function from method to get devices{} data from 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:

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

Here is my onChange function in method:

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

The selected value is already bound to `choosed` by v-model, and thus, you don't need onChange function. — Mitsuki, Jun 14 '22 at 02:40
I put on change function because i got error if i transfer to another page and came back to the select option page. The value in choosed v-model will not change it will be static the last time selected value id bound in choosed v-model. For Example: choosed: 1 if i click another page and came back and select another value is select option it will stay choosed: 1 it will not change. — Unswaa20, Jun 14 '22 at 02:47
"devices" should be array. Also, when you assign devices, you should use Vue.set(), otherwise it won't be reactive. — Mitsuki, Jun 14 '22 at 02:52
can you show it to me in a code so that i can understand it more? — Unswaa20, Jun 14 '22 at 03:00
devices: {} -> devices: [] Also, assign devices like this: mounted () { this.$set(this, 'devices', devices()) } — Mitsuki, Jun 14 '22 at 03:04
https://codesandbox.io/s/vue-2-playground-forked-8yeqkx?file=/src/App.vue — Mitsuki, Jun 14 '22 at 03:16

Rayl · Answer 1 · 2022-06-14T04:15:36.567

1

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>

edited Jun 14 '22 at 04:15

answered Jun 14 '22 at 03:09

Rayl

188
1
8

it didn't work i got errors: [Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading '0')", TypeError: Cannot read properties of undefined (reading '0') – Unswaa20 Jun 14 '22 at 03:48
I updated my answer. Check it again – Rayl Jun 14 '22 at 04:18

Mitsuki · Answer 2 · 2022-06-14T03:12:56.453

0

Try this... 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>

edited Jun 14 '22 at 03:12

answered Jun 14 '22 at 02:49

Mitsuki

58
2
6

what if i click to another page and came back to the select option page do this selected value id will change and not be static the last time i select it. That is my problem right now when i click another page and go back to select option page the selected id value will be static and cannot be change. example last time i selected id = 1 and when click another page and back to select option page and select another value the selected id will still be = 1 even i click another value. – Unswaa20 Jun 14 '22 at 02:58
If you'd like to store the data variables, use Vuex. https://vuex.vuejs.org/guide/forms.html#two-way-computed-property – Mitsuki Jun 14 '22 at 03:21
https://stackoverflow.com/questions/54928111/should-we-use-v-model-to-modify-vuex-store – Mitsuki Jun 14 '22 at 03:22
I've got this errors: Vue warn]: Error in mounted hook (Promise/async): "ReferenceError: devices is not defined", ReferenceError: devices is not defined – Unswaa20 Jun 14 '22 at 03:26
if your "devices" function is not async, just remove "await" from Vue.set() – Mitsuki Jun 14 '22 at 04:00

how to pass value of selected value in select option to onchange function in methods vuejs?

2 Answers2