Having an issue where, when I delete my array from localStorage, it seems to work fine. However, when I try to add a new option, the previous one reappears. I am currently using localStorage.removeItem('arrayOption'). Is there a way to permanently delete it? Thank you for any assistance.
<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: 'I am option 1, add me to the cart'
},
{
id: 2,
name: 'option2',
description: 'I am option 2, add me to the cart'
},
{
id: 3,
name: 'option3',
description: 'I am option 3, add me to the cart'
},
{
id: 4,
name: 'option4',
description: 'I am option 4, add me to the cart'
}
],
testCount: {},
}
},
methods:{
deleteOption(){
localStorage.removeItem('arrayOption')
},
addOption(id){
let addArrays = this.arrayOption[id]
localStorage.setItem("arrayOption",JSON.stringify(addArrays))
},
}