如何在数据库中存储单独的CSS样式

Question

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

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

我该如何制作"；"线通过"；样式(或任何其他(存储在数据中，以便即使刷新时也保持不变？

<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方法可以更新数据库中的记录-以下是一些可以用来应用的片段：

首先，绑定正确的点击事件(而不是现有的@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 });
}