Question posted in 
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?
2
Answers
Have you tried this ?
Or
EDIT
Ok so in your function if the mode is not grid or is not map you say ok it’s grid and set the current mode to grid.
but you never change the mode to map. Am I right ?
You can change this line of code like this :
You can try with
:style="currentMode == 'grid' ? 'color:red;' : 'color:blue'"instead:variant, and in method try