Like Twitter, I want to change the color of the like icon on every click-CodePudding

I'm making something like a Twitter like button.

I want to change the icon button color.

When clicking the button, changing from gray to red was successful.

But I don't know how to change it from red to gray.

I am using javascript and vue.

Below is the code I used.

<template>
  <div id="postbox">
    <div class="thumbnail-img" v-bind:style="{ backgroundImage: 'url('   postItem.img   ')'}"></div>
    <div>
        <h4>{{postItem.title}}</h4>
        <p>{{ cutDescript }}</p>
        <div class="text-date">{{postItem.date}}</div>
        <hr>
        <div class="footer">
            <img class="profile-img" :src="postItem.profileImg"/>
            <span class="writer">by <span class="bold">{{postItem.writer}}</span></span>
            <b-icon icon="heart-fill" class="gap_margin_5px_horizontal"
                    :variant="currentMode == 'grid' ? 'danger' : ''"
                    v-on:click="greet('grid')"
            />
            <span class="good_num">{{postItem.good}}</span>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'postbox',
  props: {
      post: {
          type: Object,
          default: function () {
              return {
                  title: 'Undefined',
                  descript: 'This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.',
                  date: '----년 --월 --일',
                  profileImg: '../assets/logo.png',
                  writer: 'unknown',
                  good: 0,
                  img: '../assets/logo.png'
              }
          }
      }
  },
  data () {
    return {
        postItem: this.post,
        currentMode: this.mode
    }
  },
  computed: {
      cutDescript: function () {
          if (this.postItem && this.postItem.descript && this.postItem.descript.length >= 200) {
              return `${this.postItem.descript.slice(0, 197)}...`
          } else if (this.postItem && !this.postItem.descript) {
              return '본문이 비어있습니다.'
          }
          return this.postItem.descript
      }
  },
  methods: {
       greet: function (mode) {
           if (mode !== 'grid' && mode !== 'map') {
                mode = 'grid'
            }
            this.currentMode = mode
            this.$emit('current-mode', this.currentMode)
       }
  }
}
</script>

Here is the code to change the color in the double.

<b-icon icon="heart-fill" class="gap_margin_5px_horizontal"
    :variant="currentMode == 'grid' ? 'danger' : ''"
    v-on:click="greet('grid')"
/>

methods: {
       greet: function (mode) {
           if (mode !== 'grid' && mode !== 'map') {
                mode = 'grid'
            }
            this.currentMode = mode
            this.$emit('current-mode', this.currentMode)
       }
}

Gray is the default setting.

Red is 'danger'.

If you go to the following address, you'll find out more about what I'm talking about.

https://bootstrap-vue.org/docs/reference/color-variants

:variant="currentMode == 'grid' ? 'danger' : ''"

The part of the first code changes the color.

That changes when I click, I get a grid from the function.

When grid, the color changes to red.

So I think it is possible to return from red to gray by using conditional statements.

but it doesn't work as i want Is there any good way?

CodePudding user response：

Have you tried this ?

:variant="currentMode == 'grid' ? 'danger' : 'gray'"

CodePudding user response：

You can try with :style="currentMode == 'grid' ? 'color:red;' : 'color:blue'" instead :variant :

Vue.config.productionTip = false
Vue.config.devtools = false
Vue.component('child', {
  template: `
    <div id="postbox">
    <div class="thumbnail-img" v-bind:style="{ backgroundImage: 'url('   postItem.img   ')'}"></div>
    <div>
        <h4>{{postItem.title}}</h4>
        <p>{{ cutDescript }}</p>
        <div class="text-date">{{postItem.date}}</div>
        <hr>
        <div class="footer">
            <img class="profile-img" :src="postItem.profileImg"/>
            <span class="writer">by <span class="bold">{{postItem.writer}}</span></span>
            <b-icon icon="heart-fill" class="gap_margin_5px_horizontal"
                    :style="currentMode == 'grid' ? 'color:red;' : 'color:blue'"
                    v-on:click="greet('grid')"
            />
            <span class="good_num">{{postItem.good}}</span>
        </div>
    </div>
  </div>
  `,
  props: {
      post: {
        type: Object,
        default: function () {
          return {
            title: 'Undefined',
            descript: 'This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.This is description.',
            date: '----년 --월 --일',
            profileImg: '../assets/logo.png',
            writer: 'unknown',
            good: 0,
            img: '../assets/logo.png'
          }
        }
      },
      mode: {type: String, default:''}
  },
  data () {
    return {
        postItem: this.post,
        currentMode: this.mode
    }
  },
  computed: {
      cutDescript: function () {
          if (this.postItem && this.postItem.descript && this.postItem.descript.length >= 200) {
              return `${this.postItem.descript.slice(0, 197)}...`
          } else if (this.postItem && !this.postItem.descript) {
              return '본문이 비어있습니다.'
          }
          return this.postItem.descript
      }
  },
  methods: {
       greet: function (mode) {
           if (mode !== 'grid' && mode !== 'map') {
                mode = 'grid '
            }
            this.currentMode = 'grid'
            this.$emit('current-mode', this.currentMode)
       }
  }
})
new Vue({
  el: '#demo',
    
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.js" integrity="sha512-Z0dNfC81uEXC2iTTXtE0rM18I3ATkwn1m8Lxe0onw/uPEEkCmVZd H8GTeYGkAZv50yvoSR5N3hoy/Do2hNSkw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.css" integrity="sha512-YnP4Ql71idaMB /ZG38 1adSSQotdqvixQ dQg8x/IFA4heIj6i0BC31W5T5QUdK1Uuwa01YdqdcT42q RldAg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue-icons.min.css" integrity="sha512-i0tPmtwhNYyKmqYiccSN9qsEX25FsNNkeWqIbjYyk7QoVkPLfyl7QsABy3oIQx5ofROjV6KLJTzV asMrT25UA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue-icons.min.js" integrity="sha512-5czZ3eLMCVT2wJXRhx0yLN2TZzA2iuncwX2s3P1MTv3X8GHxfKRtcoaTkzEzM0g38iXyuYlES8kbfXNYe7zeTA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="demo">
  <child />
</div>