Я делаю что-то вроде кнопки "Нравится" в Твиттере.

Я хочу изменить цвет кнопки значка.

При нажатии кнопки изменение цвета с серого на красный прошло успешно.

Но я не знаю, как изменить его с красного на серый.

Я использую javascript и vue.

Ниже приведен код, который я использовал.

<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>

Вот код для изменения цвета в дубле.

<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)
       }
}

Серый - это настройка по умолчанию.

Красный - «опасность».

Если вы пойдете по следующему адресу, вы узнаете больше о том, о чем я говорю.

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

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

Часть первого кода меняет цвет.

Это меняется, когда я нажимаю, я получаю сетку от функции.

При сетке цвет меняется на красный.

Поэтому я думаю, что можно вернуться от красного к серому, используя условные операторы.

Но он работает не так, как я хочу. Есть ли хороший способ?

0
dkskfktldi 22 Сен 2021 в 16:03

2 ответа

Лучший ответ

Вы можете попробовать с :style="currentMode == 'grid' ? 'color:red;' : 'color:blue'" вместо :variant, а в методе попробуйте

greet: function () {
  this.currentMode === 'grid' ? this.currentMode = '' : this.currentMode = 'grid'
}
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()"
        />
        <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 () {
     this.currentMode === 'grid' ? this.currentMode = '' : this.currentMode = 'grid'
     /*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>
0
Nikola Pavicevic 22 Сен 2021 в 13:37

Вы пробовали это?

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

Или же

v-bind:style="[currentMode == 'grid' ? {'color' : 'danger'} : {'color' : 'gray'}]"

ИЗМЕНИТЬ
Хорошо, поэтому в вашей функции, если режим не является сеткой или не является картой, вы говорите, что это сетка, и устанавливаете текущий режим на сетку.
но вы никогда не меняете режим на карту. Я прав ?
Вы можете изменить эту строку кода следующим образом:

<b-icon icon="heart-fill" class="gap_margin_5px_horizontal"
                    :variant="currentMode == 'grid' ? 'danger' : ''"
                    v-on:click="greet((currentMode == 'gird' ? 'map' : 'grid'))"
            />
0
Arman Ghaffarian 22 Сен 2021 в 13:37