Блог

Главная - Вопросы по программированию - Как изменить цвет для v-для элементов с данными Firestore

Как изменить цвет для v-для элементов с данными Firestore

#javascript #html #firebase #vue.js

# #javascript #HTML #firebase #vue.js

Вопрос:

Мой проект похож на Twitter.

Что я могу сделать:

  • показывать сообщения
  • показывать лайки (числа) в реальном времени

Что я не могу сделать:

  • показывать изменения цвета в каждом значке like

Вот код:

Моя база данных Firestore:

 posts {
  content: string,
  likes: 0,
}

Vue:

 <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 , Огневая база.)

Комментарии:

1. Похоже, вам, возможно, придется изучить CSS для оформления ваших HTML-элементов.

2. Привет, Даг, спасибо за комментарий. Я думаю, что CSS не может изменить «каждый» элемент в списке. CSS изменяет каждый элемент.

3. Вы можете стилизовать каждый элемент отдельно, если хотите.

4. Я понятия не имею об этом… Не могли бы вы рассказать мне больше, пожалуйста?

5. Подсказка: используйте v-bind.style или v-bind:class . Эти варианты использования описаны в документации: vuejs.org/v2/guide/class-and-style.html

Ответ №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 и режим передачи, считающийся реквизитом.