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

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

在设置本地存储的调用中，您正在使用字符串'index'而不是组件的index data属性来设置项。现在，所有组件都从同一本地存储密钥读取。