0

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);
},
Daljeet
  • 1,573
  • 2
  • 20
  • 40
Elbphilharmonie
  • 77
  • 12

1 Answers1

0

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.

Thomas
  • 8,426
  • 1
  • 25
  • 49