Answer the question
In order to leave comments, you need to log in
How to save button states when navigating through vue SPA pages?
I save the element in localstorage when the button is clicked, while I immediately hide the add button, and show the delete button. The problem is that when I go to another page where I display the added elements from localstorage, the element is displayed again with the add button, and when I return to the main page, the add button is again displayed on those elements that were added to localstorage, although they are already in localstorage.
Tell me how to save states when navigating through pages and updating the page.
here is the logic of the card itself
<template>
<div class="card">
<h2 class="card__title">{{ character.name }}</h2>
<div class="card__img">
<img :src="character.image" alt="image">
</div>
<div class="card__action">
<span>{{ character.gender }}</span>
<div>
<div v-if="allowSave" class="card__btn card__btn--favorites" @click ="saveItem"></div>
<div v-if="allowDelete" class="card__btn card__btn--delete" @click="deleteItem"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Card',
data() {
return {
allowDelete: false,
allowSave: true
}
},
props: {
character: {
type: Object,
required: true
},
},
methods: {
saveItem() {
let items = JSON.parse(localStorage.getItem('favorites')) || [];
items.push(this.character)
localStorage.setItem('favorites', JSON.stringify(items))
this.allowSave = false
this.allowDelete = true
},
deleteItem() {
let items = JSON.parse(localStorage.getItem('favorites'))
items = items.filter(character => character.name !== this.character.name)
localStorage.setItem('favorites', JSON.stringify(items))
this.allowDelete = false
this.allowSave = true
},
}
}
<template>
<div class="favorites">
<div class="favorites__inner">
<Card v-for="character in favorites" :key="character.id" :character="character"/>
</div>
</div>
</template>
<script>
import Card from "../components/Card";
export default {
name: 'Favorites',
components: {
Card
},
data() {
return {
favorites: [],
}
},
methods: {
fetchFavorites() {
this.favorites = JSON.parse(localStorage.getItem('favorites'))
}
},
mounted() {
this.fetchFavorites()
}
}
Answer the question
In order to leave comments, you need to log in
Right here
return {
// Вот тут проверяйте наличие данных в localStorage и устанавливайте значения на их основе
allowDelete: false,
allowSave: true
}
data() {
const isSaved =
!! JSON.parse(localStorage.getItem('favorites') || '[]')
.find(character => character.name !== this.character.name)
return {
allowDelete: isSaved,
allowSave: !isSaved,
}
},
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question