Dans Vue js, comment attribuer un identifiant unique qui ne se réinitialise pas lors du rechargement de la page

Question

Je développe un petit projet pour apprendre Vue js. Ce devrait être un outil de suivi des habitudes. J'ai actuellement un bug où si vous rechargez la page et ajoutez une nouvelle personnalisation, ma fonctionnalité censée changer l'arrière-plan ne fonctionnera pas correctement.

L'erreur est affichée ici Voici à quoi ressemble mon tableau :

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}

Je comprends pourquoi ça ne marche pas, car j'utilise un compteur pour attribuer l'identifiant, qui se remet à 0 au rechargement.

<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();
  }
  }
 
}

Des idées sur la façon de résoudre ce problème ?

Answer 1

Vous devez charger le stockage local et définir la longueur sur la valeur du compteur. J'ai fait un exemple fonctionnel ici. J'ai également amélioré votre code pour le rendre plus cohérent avec les concepts de Vue. Comme l'a souligné @Rahul Purohit, JSON.stringify 结果，加载时需要 JSON.parse est requis lors de la sauvegarde.

sssccc