So weisen Sie in Vue js eine eindeutige ID zu, die beim erneuten Laden der Seite nicht zurückgesetzt wird

Question

Ich entwickle ein kleines Projekt, um Vue js zu lernen. Es sollte ein Gewohnheitstracker sein. Ich habe derzeit einen Fehler, bei dem meine Funktion, die den Hintergrund ändern soll, nicht richtig funktioniert, wenn Sie die Seite neu laden und eine neue benutzerdefinierte Funktion hinzufügen.

Der Fehler wird hier angezeigt So sieht mein Array aus:

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}

Ich verstehe, warum es nicht funktioniert, weil ich einen Zähler verwende, um die ID zuzuweisen, der beim erneuten Laden auf 0 zurückgesetzt wird.

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

Irgendwelche Ideen, wie man dieses Problem lösen kann?

Answer 1

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