我需要在 LocalStorage 中保存單個對象，但我保存了整個數組

Question

我不明白我應該如何只保存一個 object 而不是整個數組。 我正在嘗試創建電影觀看列表。 如果我點擊“添加到監視列表”，單個 object 應該保存在 LocalStorage 中。 如果我點擊從監視列表中刪除，object 應該被刪除。 我試圖寫下規范所有這些的方法，但我猜有些地方不對勁。 數據來自 API 請求。 這是代碼：

<template>
    <div>
        <div class="card" v-for="movie in movies"
            :key="movie.id">
            {{movie.title}}
            {{movie.release_date}}
            <button type="submit" @click="storeMovie" >
                Aggiungi
            </button>
            <button type="submit" @click="removeMovie">
                Rimuovi
            </button>
        </div>
        
    </div>
</template>

<script>
import axios from 'axios'

    export default {
    //Cambiare il nome con quello del componente creato
        name: 'HomeComp',
        data () {
            return {
                movies: [],
                movie: "",
            }
        },
        mounted () {
            axios
                .get('https://api.themoviedb.org/3/movie/popular?api_key=###&language=it-IT&page=1&include_adult=false&region=IT')
                .then(response => {
                    this.movies = response.data.results
                    // console.log(response.data.results)
                })
                .catch(error => {
                    console.log(error)
                    this.errored = true
                })
                .finally(() => this.loading = false)

                if (localStorage.movies) {
                    this.movies = JSON.parse(localStorage.movies);
                }
        },
        watch: {
            movies: {
                handler(newMovies) {
                    localStorage.movies = JSON.stringify(newMovies);
                },
                deep:true
            }
        },
        methods: {
            getMovie() {
                this.movies = JSON.parse(localStorage.getItem("movie"));
            },
            storeMovie() {
                if (this.movie.length) {
                    // push the new movie to list
                    this.movies.push(this.movie);

                    // store the data in localStorage
                    localStorage.setItem("movies", JSON.stringify(this.movies));

                    // clear the input
                    this.movie = "";
                }
            },
            removeMovie() {
                localStorage.removeItem('movie');
            }
        },
    }
</script>

<style scoped lang="scss">
/*Inserire style componente*/
</style>

試圖解析廣告字符串化，但我認為我在某些方面做錯了。 還寫了一些方法，不行

Answer 1

根據您發布的代碼，很少有觀察：

• 當你想通過input存儲新電影時， Aggiungi按鈕應該在v-for循環之外。
• 對於removeStore事件，您需要從模板中傳遞商店 ID，以便我們可以過濾掉movies數組。

現場演示：

 new Vue({ el: '#app', data: { movies: [], movie: '' }, mounted() { // This data will come from API, Just for a demo purpose I am using mock data. this.movies = [{ id: 1, title: 'Movie A', release_date: '06/12/2022' }, { id: 2, title: 'Movie B', release_date: '07/12/2022' }, { id: 3, title: 'Movie C', release_date: '08/12/2022' }, { id: 4, title: 'Movie D', release_date: '09/12/2022' }, { id: 5, title: 'Movie E', release_date: '10/12/2022' }] }, methods: { storeMovie() { const newMovieID = this.movies.at(-1).id + 1; this.movies.push({ id: newMovieID, title: this.movie, release_date: '06/12/2022' }) }, removeMovie(movieID) { this.movies = this.movies.filter(({ id }) => id !== movieID) } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div> Add new movie: <input type="text" v-model="movie"/> <button type="submit" @click="storeMovie()"> Aggiungi </button> </div><br> <div class="card" v-for="movie in movies":key="movie.id"> {{movie.title}} {{movie.release_date}} <button type="submit" @click="removeMovie(movie.id)"> Rimuovi </button> </div> </div>