Get value from ion-select and store it in localstorage

Issue

I want to save the value from the ion-select-option into the localstorage. However, it returns 'undefined'. I'm using Ionic and Vue 3.0.0.

How can I get the selected option and store it in the localstorage?

Ion-select:

<ion-item>
 <ion-select
  @ionChange="store(options)"
  v-model="options"
  placeholder="Kies status"
 >
 <ion-select-option
  v-for="option in options"
  v-bind:value="{ id: option.id, text: option.name }"
  v-bind:key="option"
 >
  {{ option.name }}
      </ion-select-option>
     </ion-select>
  </ion-item>

Options

return {
 selected: "",
   options: [
     { id: 1, name: "Gelezen" },
     { id: 2, name: "Nog niet gelezen" },
     { id: 3, name: "C" },
  ],```

Method

methods: {
  store(value) {
    const name = value.name;
    console.log("name" +name);
    const selected = localStorage.setItem("option", name);
},

Solution

You can get the selected value from the detail property of the CustomEvent emitted:

Note that I removed the (options) from the event handler.

Template:

 <ion-select
  @ionChange="store"
  v-model="options"
  placeholder="Kies status"
 >

Method:

methods: {
  store(event) {
    const name = event.detail.value;
    console.log("name" + name);
    const selected = localStorage.setItem("option", name);
},

BTW localStorage.setItem() always returns undefined so it doesn't make sense to save it to a variable (in your case selected.

Answered By - Thomas