Как изменить цвет элементов v-for с данными Firestore
Мой проект похож на Twitter.
Что я могу сделать:
- показать посты
- показывать лайки(числа) в реальном времени
Что я не могу сделать:
- показать изменения цвета в каждой иконке лайка
Вот код:
Моя база данных Firestore:
posts {
content: string,
likes: 0,
}
Вид:
<li v-for = "post in posts" :key = "post.id">
<p>{{ post.content }}</p>
<div>
<v-icon @click = "posts(post.id)">mdi-heart</v-icon>
<span> {{ post.likes }} </span>
</div>
</li>
JavaScript:
method: {
like () {
if (I didn't like) {
// change the color of like icon of the post.
} else {
// change the color back.
})
}
}
Итак... Как я могу изменить цвет значка лайка для каждого сообщения?
(работает над новейшими версиями Vue.js, Vuetify, Nuxt.js, Firebase.)
Привет Дуг, спасибо за комментарий. Я думаю, что CSS не может изменить «каждый» элемент в списке. CSS изменяет каждый элемент.
Вы можете стилизовать каждый элемент отдельно, если хотите.
Я понятия не имею об этом... Не могли бы вы рассказать мне больше, пожалуйста?
Подсказка: используйте v-bind.style или v-bind:class. Эти варианты использования описаны в документации: vuejs.org/v2/guide/class-and-style.html
Спасибо, Терри. Я прочитал страницу, но, кажется, я не понял... Я прочитаю это снова.
Поскольку вы используете Vuetify, вы можете динамически назначать класс цвета из Vuetify vuetifyjs.com/en/styles/colors, следуя совету Терри.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
<template>
...
...
<div :class = "bindLike">
<v-icon @click = "posts(post.id)">mdi-heart</v-icon>
<span> {{ post.likes }} </span>
</div>
</template>
<script>
export default {
computed: {
bindLike: function() {
return post.likes > 0 ? 'liked' : 'notliked';
}
},
}
</script>
<style>
.liked { background: blue; }
.notliked { background: transparent; }
</style>
это может сработать для вас ..!
Но идеальным было бы создать новый компонент PostLikes и передать режим, считающийся реквизитом.
Похоже, вам, возможно, придется изучить CSS, чтобы стилизовать ваши HTML-элементы.