为什么本地存储会更改任务列表中的每个条目 [英] Why local storage is changing every entry in task list

问题描述

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

The local storage should only hold state for the task where the completed button has been pressed. Currently when I refresh the page all the tasks are marked as completed.

<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>

推荐答案

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

In your calls to set localstorage, you are setting the item with a key of string 'index', not the index data property of your component. With what you have now, all components are reading from the same localstorage key.

例如，更改:

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

收件人:

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

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

Also, I don't think the way you are setting a data property equal to a passed property works. I've never seen that before. I think you are just setting your index data property equal to the string literal 'this.itemId'.

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

I've rewritten your component trying to clean what errors I think there are. Let me know if this works.

<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>

这篇关于为什么本地存储会更改任务列表中的每个条目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！