我正在开发一个小项目来学习 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。

    
      
        
        
        {{ habit.title }}

        
          
            
              
                Delete
              
            

            
              
                Edit
              
            
          
        
      
    
    


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

关于如何解决这个问题有什么想法吗？