javascript - 从离子选择中获取价值并将其存储在本地存储中

Question

我想将 ion-select-option 中的值保存到本地存储中。但是，它返回“未定义”。我正在使用 Ionic 和 Vue 3.0.0。

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

离子选择：

<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

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

请注意，我(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);
},

BTWlocalStorage.setItem() 总是返回undefined，所以将它保存到变量中没有意义（在你的情况下selected.