Is it possible to set a unique identifier in Vue.js that persists even after the page is reloaded?

Currently, I'm working on a small project diving into Vue js - a Habittracker. Unfortunately, there is a bug in my code. When the page is reloaded and new habits are added, the function that should change the background doesn't work as expected.

This link shows the bug. Here's a glimpse of how my array is structured:

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}

The reason behind this issue lies in using a counter to assign the id, which resets to 0 upon reloading.

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

Do you have any suggestions or tips on how to tackle this problem?

Answer №1

To utilize your localStorage effectively, ensure to initialize its length with the counter value. I have provided a functional demo for reference. Moreover, I have optimized your code to align better with Vue's principles. As advised by @Rahul Purohit, remember to use JSON.stringify when saving and JSON.parse when loading.

<template>
  <q-input label="Title" v-model="habitTitle" />
  <q-btn label="Add habit" @click="addHabit" />
  <div class="q-pa-md" v-for="(habit, index) in habits" :key="habit.id">
    <q-card
      class="my-card"
      :id="habit.id"
      :ref="(el) => (cardRefs[habit.id] = el)"
    >
      <q-card-section>
        <q-checkbox
          id="checkbox"
          v-model="habit.ready"
          @click="changeToTransparent(habit)"
        >
        </q-checkbox>
        {{ habit.id }} {{ 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>
</template>

<script setup>
const { ref, onMounted } = require("vue");

// it can be just a let.
const counter = ref(0);
const habits = ref([]);
const habitTitle = ref("test");
const cardRefs = ref({});

const saveToLocalStorage = () => console.log("saved");

const addHabit = () => {
  habits.value.push({
    id: counter.value++,
    title: habitTitle.value,
    ready: false,
  });
  saveToLocalStorage();
  habitTitle.value = "";
};

const changeToTransparent = (habit) => {
  if (cardRefs.value[habit.id] != null) {
    if (habit.ready) {
      cardRefs.value[habit.id].$el.style.backgroundColor =
        "rgba(170,193,200,0.25)";
      saveToLocalStorage();
    } else {
      cardRefs.value[habit.id].$el.style.backgroundColor = "";
      saveToLocalStorage();
    }
  }
};

onMounted(() => {
  // Load habits from localStorage
  // This is just an example
  habits.value = [
    {
      id: 0,
      title: "Testing new habit",
      ready: true,
    },
    {
      id: 1,
      title: "Testing new habit",
      ready: false,
    },
    {
      id: 2,
      title: "Testing new habit",
      ready: false,
    },
  ];
  counter.value = habits.value.length;
});
</script>

Answer №2

Based on the information provided, it seems like you are not utilizing a backend system and instead storing all data locally.

In this scenario, it appears that you are saving your entries in an array within local storage, possibly labeled as habits: []

Rather than setting the counter to 0 initially, consider incorporating a lifecycle method for more efficiency.

beforeMount() {
  counter = JSON.parse(localStorage.getItem("habits")).length
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Press the button to update several span elements

Imagine I have multiple span elements like this: <span>A</span> <span>B</span> <span>C</span> <span>D</span> and a div element (which will be converted to a button later) named "change". <div id="chan ...

Troubleshoot: React and Laravel login authentication issues

I am relatively new to working with React, React Router, and Laravel for authentication. I've been trying to set up authentication using Laravel, React, and React Router, and although the page redirects to the desired destination when the submit butto ...

"Execution of the console.log statement occurs following the completion of the request handling

When I have a piece of middleware that responds if no token is found, why does the console.log line still run after the request is responded to? I always believed that the res.json call would "end" the middleware. Any insights on this behavior would be g ...

What is the best way to modify an image in a column when I hover over a table row that was dynamically inserted using a button function?

Is there a way to dynamically change an image in a column when hovering over a table row that was added through a button function? Here is the current code that I am using, but it does not seem to work as intended when I hover over the row. This function ...

MongoDB issued an error notification stating: "The operation `disneys.insertOne()` has experienced a timeout after 10000 milliseconds."

I am currently in the process of developing a new API using MongoDB and Express, and I have come across the following issue: "Operation disneys.insertOne() buffering timed out after 10000ms." To test my API, I am using route.rest. However, I ...

Transferring data from PHP to AJAX and then injecting it into an SQL query

I've been attempting to pass a datepicker variable into an onclick ajax function, which then sends it to another ajax method that passes the variable to an SQL query. The result of the query is then passed back into the ajax function to generate a cha ...

After receiving a data token from the server in one controller, how can I efficiently utilize that token in a different AngularJS controller?

In my adminSearchCtrl controller, I am receiving data from the server in the form of a token and want to pass that token to another controller named "adminViewCtrl". How can I achieve this? adminSearchCtrl.js $scope.getUserDetails = function(selectedUser ...

jquery allows you to toggle the visibility of content

There are two divs with a button positioned above them. Initially, only one div, the catalogusOrderBox, is visible. When the button named manualButton is clicked, it should display the manualOrderBox div while hiding the catalogusOrderBox div. The text on ...

What is the method for activating -webkit-animation/transition-property for :before and :after pseudo elements?

Is there a way to activate the -webkit-animation for :before and :after pseudo elements? It seems that in this demo http://jsfiddle.net/4rnsx/, the animation is not working for :before and :after elements. I am attempting to make it work using Mootools ...

Form submission is failing due to a single checkbox not being submitted and an error is occurring with MultiValueDictKeyError during

<body ng-app=""> {% extends "pmmvyapp/base.html" %} {% load crispy_forms_tags %} {% load static %} {% block content%} <div class="col-md-8"> <form method="post" action="/personal_detail/"> {% csrf_token %} <div class="form-group" ...

Is it possible to convert a .gif file into a jpeg image format for mobile display on my Gatsby website?

I'm looking to convert a .gif file into a mobile.png image for my Gatsby site, but I'm struggling to find the right resources. Does anyone have suggestions on how I can achieve this? Here is the frame: https://i.sstatic.net/IjYv4.png ...

I'm running into an InvalidSelectorError and I could use some assistance in properly defining

As I gaze upon a massive dom tree, my task using NodeJS/Selenium is to locate an element by the title attribute within an anchor tag and then click on the associated href. Despite being a newcomer to regex, I am encountering numerous errors already. Below ...

The checkboxes seem to be malfunctioning following an ajax request

I've been attempting to utilize ajax to load data, but for some reason the checkboxes aren't functioning. Below is the HTML I'm trying to load via ajax: <div class="mt-checkbox-list" > <?php foreach($product_offerings as $row){ $c ...

Tips for emphasizing a cube face when it is hovered over in THREE.js

I'm currently using a raycaster to determine the face of a cube and then apply color to it following this method: const colorAttribute = intersected.object.geometry.getAttribute('color'); colorAttribute.setXYZ(face.a, color.r, color.g, color ...

Creating a specific ng-init condition for introducing new elements into the scope

Using ng-repeat, I am generating a series of todo items within div elements. My goal is to automatically apply the "editing = true" styling to these newly created items and if possible, focus on them as well. <div class="item" ng-class="{'editing- ...

Modify the colors of the chartist fill and stroke using JavaScript

Struggling to dynamically set colors in a chartist graph using JavaScript. How can custom colors be applied through JS? The attempted method below is not successfully changing the color for the showArea in the chartist graph. <!doctype html> <htm ...

Access to Web Share API requires permission

I am currently attempting to integrate the Web Share API feature into my testing web application, but unfortunately, I seem to be encountering some difficulties. Below is the code snippet I have been working with: const newVariable: any = navigator; {newV ...

Using an if-else statement in AngularJS

<ng-switch on="MyData.Status"> <p ng-switch-when="2"> <p ng-if="MyData.SomeProp == false"> Message 1 </p> <p ng-if="MyData.SomeProp == true"> Message 2 </p> ...

Tips for managing large amounts of data retrieval from an API

As a beginner, I am attempting to retrieve data from an API and display it using the v-for directive. However, this process is causing my app to lag. It freezes when new data is fetched or when I search within the list. The following code snippet shows whe ...

Stable placement in browsers using webkit technology

Having trouble with fixed positioning on webkit browsers. Works fine in Firefox, but can't seem to solve the issue. You can see the problem here: When clicking on a project, a page is loaded using jQuery's .load() function. On this page, there ...