从 ion-select 获取值并存储在 localstorage

Question

我想将 ion-select-选项的值保存到本地存储中。但是，它 returns 'undefined'。我正在使用 Ionic 和 Vue 3.0.0.

如何获取 selected 选项并将其存储在本地存储中？

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

选项

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

方法

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

Answer 1

您可以从 CustomEvent 发出的 detail 属性中获取所选值：

请注意，我从事件处理程序中删除了 (options)。

模板：

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

方法：

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

顺便说一句 localStorage.setItem() always returns undefined 所以将它保存到变量中没有意义（在你的情况下 selected.

从 ion-select 获取值并存储在 localstorage

Get value from ion-select and store it in localstorage

javascript

ionic-framework

vue.js

ionic-vue