How to store individual CSS styling in a database?

Question

Thank you for helping people and contributing to the open source.

I have a Vue.js to-do app. Data is stored in firebase via vue-fire and firestore. I have a function which checks the todo item done by clicking it. But this styling disappears whenever the page is refreshed.

How can I make "line-through" style(or any other) get stored in the data so that even when refreshed it stays there?

   <template>
      <div class="pt-3">
        <div v-show="showText == true" class="text">
          <h2>Get started by adding a new todo.</h2>
          <p>Click on the item to check it done.</p>
          <p class="warnings">This is a prototype app. Please do not input any sensitive information!</p>
        </div>
        <v-row class="addtodo d-flex justify-center">
          <v-col cols="8">
            <v-text-field
              class="addtext"
              label="New Todo"
              outlined
              v-model="newItem"
              @keyup.enter="addItem"
            ></v-text-field>
          </v-col>
          <v-col cols="1">
            <v-btn class="btn" large color="primary" :disabled="newItem == ''" @click="addItem">Add</v-btn>
          </v-col>
        </v-row>
        <transition-group class="d-flex flex-column justify-center align-center" name="fade">
          <v-card
            class="d-flex justify-center align-center ma-2 text-left"
            width="400"
            v-for="(ToDo, index) in ToDos"
            :key="ToDo.id"
        @click="checked = !checked"
          >
            <v-row class="d-flex justify-space-around">
              <v-col cols="8">
                <v-list-item-title     
            :class="{ done: checked }" class="headline mb-1">{{ index + 1}} - {{ ToDo.name }}</v-list-item-title>
              </v-col>
              <v-col class="tools text-right">
                <v-btn class="dicon" icon color="secondary" @click="editToDo(ToDo.id)">
                  <v-icon>mdi-pencil</v-icon>
                </v-btn>
                <v-btn class="dicon" icon color="red" @click="deleteToDo(ToDo.id)">
                  <v-icon>mdi-delete</v-icon>
                </v-btn>
              </v-col>
            </v-row>
          </v-card>
        </transition-group>
      </div>
    </template>
    
    
    
    <script>
    import { db } from "../firebase/db";
    
        export default {
      name: "ToDoList",
      data() {
        return {
          ToDos: [],
          ToDo: [],
          newItem: "",
          index: "",
          showText: true,
          checked: false,
          currentlyEditing: null,
          todoEditText: "",
        };
      },
      methods: {
        async addItem() {
          if (this.newItem) {
            await db.collection("ToDos").add({ name: this.newItem });
            this.newItem = "";
          }
          this.deleteText();
        },
        deleteToDo(id) {
          db.collection("ToDos").doc(id).delete();
        },
        deleteText: function () {
          this.showText = false;
        },
      },
      beforeDestroy() {
        clearInterval(this.showText);
      },
      firestore: {
        ToDos: db.collection("ToDos"),
      },
    };
    </script>


<style>
.done {
 text-decoration: line-through;
}

.text {
  margin: 0 auto;
  margin-top: -200px;
  text-align: center;
  padding: 1vh;
}
.warnings {
  color: red;
}

h2 {
  margin: 0 auto;
  text-align: center;
  margin-top: 30vh;
}
.addtodo {
  position: fixed;
  bottom: -20px;
  right: 0;
  left: 0;
  padding-right: 30px;
  z-index: 1111;
  background: white;
  box-shadow: 4px 4px 4px 4px #888;
}

.btn {
  margin-top: 6px;
}
.addtext {
}

.todolist {
  margin: 0 auto;
  color: red;
  display: flex;
  text-align: left;
}

.tools {
  position: absolute;
  top: 2px;
  padding: 0;
  margin: 0 auto;
}
</style>

Answer 1

I don't see any update method that would enable you update records you have in your database - here's some snippet you can use to apply:

First, bind proper click event (instead existing @click="checked = !checked" one):

@click="updateTodo(ToDo)"

And then in your methods:

updateToDo(ToDo) {
  db.collection("ToDos").doc(ToDo.id).patch({ checked: !ToDo.checked })  // <-- not sure if you have .patch method available here to update only 1 property, but I hope you can figure out how to handle that :)
}

EDIT (probable answer for 1st comment below):

Not sure how your binding with DB works, but I assume that it might work like that:

updateToDo(ToDo) {
  ToDo.checked = !ToDo.checked;
  db.collection("ToDos").doc(ToDo.id).patch({ checked: ToDo.checked });
}