Dalam Vue js, cara untuk menetapkan ID unik yang tidak ditetapkan semula pada muat semula halaman

Question

Saya sedang membangunkan projek kecil untuk mempelajari Vue js. Ia sepatutnya menjadi penjejak tabiat. Pada masa ini saya mempunyai pepijat di mana jika anda memuat semula halaman dan menambah tersuai baharu, fungsi saya yang sepatutnya menukar latar belakang tidak akan berfungsi dengan betul.

Ralat ditunjukkan di sini Inilah rupa susunan saya:

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}

Saya faham mengapa ia tidak berfungsi, kerana saya menggunakan kaunter untuk menetapkan id, yang ditetapkan semula kepada 0 apabila dimuat semula.

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

Ada idea bagaimana untuk menyelesaikan masalah ini?

Answer 1

Anda perlu memuatkan storan tempatan dan tetapkan panjang kepada nilai kaunter. Saya telah membuat contoh yang berfungsi di sini. Saya juga menambah baik kod anda untuk menjadikannya lebih konsisten dengan konsep Vue. Seperti yang @Rahul Purohit nyatakan, JSON.stringify 结果，加载时需要 JSON.parse diperlukan semasa menyimpan.

sssccc