在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

您需要載入本機儲存並將長度設定為計數器值。我在這裡做了一個工作範例。我還改進了你的程式碼，使其更符合 Vue 的概念。正如 @Rahul Purohit 指出的，儲存時需要 JSON.stringify 結果，載入時需要 JSON.parse 。

sssccc