如何将单个 CSS 样式存储在数据库中？

Question

感谢您帮助人们并为开源做出贡献。

我有一个 Vue.js 待办事项应用程序。数据通过 vue-fire 和 firestore 存储在 firebase 中。 我有一个功能可以通过单击来检查待办事项。但是每当刷新页面时，这种样式就会消失。

我怎样才能使“line-through”样式（或任何其他）存储在数据中，以便即使在刷新时它也保留在那里？

   <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

我没有看到任何 update 方法可以让您更新数据库中的记录 - 这里有一些可以用来应用的 sn-p：

首先，绑定正确的点击事件（而不是现有的@click="checked = !checked"一个）：

@click="updateTodo(ToDo)"

然后在你的方法中：

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 :)
}

编辑（下面第一条评论的可能答案）：

不确定您与 DB 的绑定是如何工作的，但我认为它可能会这样工作：

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