从 localStorage vuejs 中删除一个数组

Question

我有一个问题，当我从 localStorage 中删除我的数组时它可以工作，但是当我添加一个新选项时，前一个选项会重新出现。我正在使用 localStorage.removeItem('arrayOption') ，如何永久删除它？谢谢你的帮助

<template>
   <div v-for="option in arrayOption" :key="option.id_option">
           
            <div>
                <div>
                    <p>{{ option.name}} </p>
                    <p>{{ option.description}}</p>
                </div>
                <div  >
                   
                        <button  @click="deleteOption(option.id_option)" >-</button>
                        <p v-if="option.count == 0">{{ count }}</p>
                        <p v-else>{{ option.count }}</p>
                       <button @click=" addOption(option.id_option)">+</button>
                       </div>
                    </div>
                </div>
            </div>
</template>
new Vue({
  el: '#app',
  data() {
    return {
      arrayOption: [{
          id: 1,
          name: 'option1',
          description: 'je suis l option 1 ajoute moi au panier'
        },
        {
          id: 2,
          name: 'option2',
          description: 'je suis l option 2 ajoute moi au panier'
        },
        {
          id: 3,
          name: 'option3',
          description: 'je suis l option 3 ajoute moi au panier'
        },
        {
          id: 4,
          name: 'option4',
          description: 'je suis l option 4 ajoute moi au panier'
        }
      ],
      testCount: {},
    }
  },
   methods:{
    deleteOption(){
        localStorage.removeItem('arrayOption')
    },
     addOption(id){
        let addArrays = this.arrayOption[id]
        localStorage.setItem("arrayOption",JSON.stringify(addArrays))
    },
}

Answer 1

问题是您从数组中获取索引，而不是查找具有选定 ID 的数组项。尝试改变这一点

addOption(id){
  const selectedArray = this.arrayOption.find(i => i.id === id)
  localStorage.setItem("arrayOption",JSON.stringify(selectedArray))
}