从 localStorage vuejs 中删除一个数组

问题描述

我遇到了一个问题，当我从 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))
    },}

解决方法

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

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