为什么本地存储正在更改任务列表中的每个条目

Question

本地存储应该只保存按下完成按钮的任务的状态。当前，当我刷新页面时，所有任务都标记为已完成。

<template>
<button type="button" v-bind:class="order_button_style" @click="on_order_button_click()">
  {{ buttonText }}
</button>
</div>
</template>

<script>
export default {

props: 'itemId', required: true,
data() {
    return {
        index: 'this.itemId',
        status: ''
    }
},
methods: {
on_order_button_click() {
  this.status = !this.status;
  localStorage.setItem('index', this.status);
}

},
mounted() {

this.status = localStorage.getItem('index') === "true";
},
computed: {
buttonText() {
  return this.status === true ? "Completed" : "Complete";
},
 order_button_style() {
  return this.status === true
    ? "btn btn-danger"
    : "btn btn-primary";
}

}

};
</script>

Answer 1

在调用设置 localstorage 时，您使用字符串 'index' 键设置项目，而不是组件的索引数据属性。使用您现在拥有的，所有组件都从同一个本地存储密钥读取。

例如，更改：

mounted() {
    this.status = localStorage.getItem('index') === "true";
},

收件人：

mounted() {
    this.status = localStorage.getItem(this.index) === "true";
},

此外，我认为您将数据属性设置为等于传递的属性的方式行不通。我以前从没见过。我认为您只是将索引数据属性设置为等于字符串文字 'this.itemId'.

我重写了您的组件，试图清除我认为存在的错误。让我知道这是否有效。

<template>
    <button type="button" v-bind:class="order_button_style" @click="on_order_button_click()">
        {{ buttonText }}
    </button>
</template>

<script>
export default {
    props: {
        itemId: {
            type: String,
            required: true,
        }
    },
    data() {
        return {
            status: false,
        }
    },
    methods: {
        on_order_button_click() {
            this.status = !this.status;
            localStorage.setItem(this.itemId, this.status);
        }
    },
    mounted() {
        this.status = localStorage.getItem(this.itemId) === "true";
    },
    computed: {
        buttonText() {
            return this.status === true ? "Completed" : "Complete";
        },
        order_button_style() {
            return this.status === true ?
                "btn btn-danger" :
                "btn btn-primary";
        }

    }

};
</script>

为什么本地存储正在更改任务列表中的每个条目

Why local storage is changing every entry in task list

javascript

local

local-storage

laravel

vue.js