在 Vue js 中，我如何分配在页面重新加载时不会重置的唯一 ID

Question

我正在做一个小项目来进入 Vue js。 它应该是一个习惯追踪器。 我目前有一个错误，如果你重新加载页面并添加新的习惯，我应该改变背景的功能无法正常工作。

这里显示了错误，这是我的数组的外观：

0
: 
{id: 0, title: "1", ready: false}

1
: 
{id: 1, title: "123", ready: false}

2
: 
{id: 2, title: "123", ready: false}

3
: 
{id: 0, title: "123", ready: true}

我明白为什么它不起作用，因为我正在使用一个计数器来分配 id，重新加载时它会重置为 0。

<div class="q-pa-md" v-for="(habit, index) in habits" :key="habit.id">
    <q-card class="my-card" :id="habit.id" ref="card">
      <q-card-section>
        <q-checkbox
          id="checkbox"
          v-model="habit.ready"
          @click="changeToTransparent(habit)"
        >
        </q-checkbox>
        {{ habit.title }}

        <q-btn-dropdown flat class="more" icon="more_horiz">
          <q-list>
            <q-item clickable v-close-popup @click="deletehabit(index)">
              <q-item-section>
                <q-item-label>Delete</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-close-popup @click="edithabitbutton(index)">
              <q-item-section>
                <q-item-label>Edit</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-btn-dropdown>
      </q-card-section>
    </q-card>
    <div>

let counter = 0;
const habits = ref([]);


const addHabit = () => {
  
  habits.value.push({ id: counter++, title: habittitle.value, ready: false });
  savetolocalstorage();
  habittitle.value = "";
};

const changeToTransparent = (habit) => {

  if(document.getElementById(habit.id) != null) {
    if (habit.ready) {
    document.getElementById(habit.id).style.backgroundColor =
      "rgba(170,193,200,0.25)";
    savetolocalstorage();
  } else {
    document.getElementById(habit.id).style.backgroundColor = "";
    savetolocalstorage();
  }
  }
 
}

关于如何解决这个问题的任何想法？

Answer 1

您需要加载 localStorage 并将长度设置为计数器值。 我在这里做了一个工作示例。 我还改进了你的代码，使其更符合 Vue 的概念。 正如@Rahul Purohit 指出的那样，保存时需要对结果进行JSON.stringify ，加载时需要对结果进行JSON.parse 。

<template>
  <q-input label="Title" v-model="habitTitle" />
  <q-btn label="Add habit" @click="addHabit" />
  <div class="q-pa-md" v-for="(habit, index) in habits" :key="habit.id">
    <q-card
      class="my-card"
      :id="habit.id"
      :ref="(el) => (cardRefs[habit.id] = el)"
    >
      <q-card-section>
        <q-checkbox
          id="checkbox"
          v-model="habit.ready"
          @click="changeToTransparent(habit)"
        >
        </q-checkbox>
        {{ habit.id }} {{ habit.title }}

        <q-btn-dropdown flat class="more" icon="more_horiz">
          <q-list>
            <q-item clickable v-close-popup @click="deletehabit(index)">
              <q-item-section>
                <q-item-label>Delete</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-close-popup @click="edithabitbutton(index)">
              <q-item-section>
                <q-item-label>Edit</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-btn-dropdown>
      </q-card-section>
    </q-card>
  </div>
</template>

<script setup>
const { ref, onMounted } = require("vue");

// it can be just a let.
const counter = ref(0);
const habits = ref([]);
const habitTitle = ref("test");
const cardRefs = ref({});

const saveToLocalStorage = () => console.log("saved");

const addHabit = () => {
  habits.value.push({
    id: counter.value++,
    title: habitTitle.value,
    ready: false,
  });
  saveToLocalStorage();
  habitTitle.value = "";
};

const changeToTransparent = (habit) => {
  if (cardRefs.value[habit.id] != null) {
    if (habit.ready) {
      cardRefs.value[habit.id].$el.style.backgroundColor =
        "rgba(170,193,200,0.25)";
      saveToLocalStorage();
    } else {
      cardRefs.value[habit.id].$el.style.backgroundColor = "";
      saveToLocalStorage();
    }
  }
};

onMounted(() => {
  // Load habits from localStorage
  // This is just an example
  habits.value = [
    {
      id: 0,
      title: "Testing new habit",
      ready: true,
    },
    {
      id: 1,
      title: "Testing new habit",
      ready: false,
    },
    {
      id: 2,
      title: "Testing new habit",
      ready: false,
    },
  ];
  counter.value = habits.value.length;
});
</script>

Answer 2

好的，从给定的上下文来看，我相信您没有使用任何后端，而是将所有条目保存在本地存储中。

如果是这种情况，您必须将数据存储在某个数组中以达到 LS 之类的habits: []

在这里，您可以添加一个生命周期方法，而不是将计数器初始化为 0。

beforeMount() {
  counter = JSON.parse(localStorage.getItem("habits")).length
}