我正在使用vanillaJS、Vue-JS和Firebase开发一个投票应用程序。我快结束了，但我找不到一种方法让投票按钮在用户投票时有不同的颜色(就像YouTube的喜欢和不喜欢按钮一样(，所以如果用户离开后又回来，他们投赞成票/反对票的东西会保持颜色。
到目前为止，这是我的代码。。。
index.js(云函数(:
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
exports.newUserSignup = functions.auth.user().onCreate((user)=> {
return admin.firestore().collection('users').doc(user.uid).set({
upVotedOn: [],
downVotedOn: []
})
});
exports.addRequest = functions.https.onCall((data, context) => {
return admin.firestore().collection('requests').add({
text: data.text,
songN: data.songN,
upVotes: 0,
downVotes: 0,
});
});
exports.upvote = functions.https.onCall(async (data, context) => {
const user = admin.firestore().collection('users').doc(context.auth.uid);
const request = admin.firestore().collection('requests').doc(data.id);
const doc = await user.get();
if(doc.data().upVotedOn.includes(data.id)) {
throw new functions.https.HttpsError(
'failed-precondition', 'You can only upvote a song once'
);
}
await user.update({
upVotedOn: [...doc.data().upVotedOn, data.id]
});
return request.update({
upVotes: admin.firestore.FieldValue.increment(1),
upColored: true
});
});
exports.downvote = functions.https.onCall(async (data, context) => {
const user = admin.firestore().collection('users').doc(context.auth.uid);
const request = admin.firestore().collection('requests').doc(data.id);
const doc = await user.get();
if(doc.data().downVotedOn.includes(data.id)) {
throw new functions.https.HttpsError(
'failed-precondition', 'You can only downvote a song once'
);
}
await user.update({
downVotedOn: [...doc.data().upVotedOn, data.id]
});
return request.update({
downVotes: admin.firestore.FieldValue.increment(1),
downColored: true
});
});app.js(前端/vue js代码(：
var form = document.querySelector(".form101");
var spotifyInput = document.getElementById("spotifyembd");
var songName = document.getElementById("songname")
var spotifyEmbed = document.getElementById("spotifyEmbed");
var songTitle = document.getElementById("title");
var up = document.getElementById("up");
var down = document.getElementById("down");
var app = new Vue({
el: '#unitWrapper',
data: {
requests: [],
},
methods: {
upV(id){
const upvote = firebase.functions().httpsCallable("upvote");
upvote({id: id})
.catch(err => {
showNotification();
});
},
downV(id){
const downvote = firebase.functions().httpsCallable("downvote");
downvote({id: id})
.catch(err => {
showNotification();
});
}
},
mounted(){
const ref = firebase.firestore().collection('requests').orderBy('upVotes', 'desc');
ref.onSnapshot(snapshot => {
let requests = [];
snapshot.forEach(doc => {
requests.push({...doc.data(), id: doc.id})
});
this.requests = requests;
});
}
});
form.addEventListener("submit", (e)=> {
e.preventDefault();
var songInput = `https://open.spotify.com/embed/track/${spotifyInput.value}`
const addRequest = firebase.functions().httpsCallable('addRequest');
addRequest({
text: songInput,
songN: songName.value
})
.then(() => {
form.reset();
})
});
const notification = document.querySelector('.notification');
const showNotification = () => {
notification.textContent = "You can only upvote or downvote a song once";
notification.classList.add('active');
setTimeout(() => {
notification.classList.remove('active');
notification.textContent = '';
}, 4000);
};这是一个非常简单的应用程序，我只需要这个功能，这样用户就不会对他们做了什么和没有投票感到困惑，请帮忙。
与通知末尾的内容非常相似，您可以执行以下操作：
var vote_state=(直接从firebase获取或使用API类型的无服务器请求(
let item=document.querySelector('item'(；
const setVotedState=((=>{item.classList.add(vote-${vote_state}(；
然后将"向上投票"或"向下投票"的CSS设置为不同的颜色。
使用Vue，您可以根据您在Vue实例的数据对象中提供的数据，在元素上有条件地添加样式或类：
<div v-bind:class="{ active: isActive }"></div><div :class="{ active: isActive }"></div>
或
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div><div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
它的工作方式与键/值对相同，键是类或css规则，值是控制其存在的表达式。
isActive、activeColor和fontSize，或者您希望它被称为数据对象的属性。
我建议阅读以下内容以获取更多知识：https://v3.vuejs.org/guide/class-and-style.html#binding-html类