0

Actually, I need to activate the background color of a div based on the specific value given by the user. So I have done something like this. And don't know how to go further.

<template>
    <div>
            <div class="row" style="padding-left:6vw; padding-right:6vw;">
                <button @click="r_id = 1"><q-icon name="thumb_up" class="reaction col-auto" style="font-size: 3rem;" /></button>
                <button @click="r_id = 2"><q-icon name="ion-happy" class="reaction col-auto" style="font-size: 3rem;" />   </button>     
                <button @click="r_id = 3"><q-icon name="ion-ios-heart" class="reaction col-auto" style="font-size: 3rem;" />  </button>     
                <button @click="r_id = 4"><q-icon name="ion-sad" class="reaction col-auto" style="font-size: 3rem;" /></button>
                <button @click="r_id = 5"><q-icon name="thumb_down" class="reaction col-auto" style="font-size: 3rem;" /></button>
           </div>
          <div class="button-group">
                    <q-btn class="button" push color="amber-7" style="width: 75px" @click="Reset()">Reset</q-btn>
                    <q-btn class="button" push color="positive" style="width: 75px" @click="Submit()">Submit</q-btn>
          </div>
    </div>
    <div v-bind:class="[{active1: r_id === 1},{active2: r_id === 2},{active3: r_id === 3},{active4: r_id === 4},{active5: r_id === 5}]" >
                Mycard
    </div>
<template>

And my script part is:

    export default {
      components: {
        QBtn,
        QIcon
      },
      data () {
        return {
          r_id: '',
          name: '',
          toName: ''
        }
      },
      computed: {
        className () {
          return 'active' + this.r_id
        }
      },
  methods: {
    Submit: function () {
      this.hardcode = {
        'r_id': this.r_id,
        'user_name': 'Shine',
        'fb_title': this.fbTitle,
        'fb_id': this.id,
        'fb_descrption': this.fbDescription,
        'created_time': '10 hours ago',
        'user_id': '1'
      }
      this.fbList.push(this.hardcode)
      this.Reset()
      this.id++
    }
  }

and my css part is:

active1{background:red;}
active2{background:black;}
active3{background:green;}
active4{background:yellow;}
active5{background:white;}

So how should I go on using Vuejs?

Darshan theerth
  • 462
  • 1
  • 8
  • 31
  • 1
    Possible duplicate of [Vue.js: Conditional class styling](https://stackoverflow.com/questions/43210508/vue-js-conditional-class-styling) – thanksd Sep 06 '17 at 14:16

1 Answers1

1

Seems like r_id already have the correct number so just use a simple computed property:

<div :class="className" >
Mycard
</div>

computed: {
    className () {
       return 'active' + this.r_id
    }
}
Tomer
  • 16,381
  • 13
  • 64
  • 124
  • If I am dynamically creating the div each time, then how a class of each div will maintain since I am taking classname inside **computed**. Is there any method so that I can give div each time with different classname(value)? – Darshan theerth Sep 06 '17 at 14:28
  • pass the r_id as a property to the component – Tomer Sep 06 '17 at 14:29
  • Could you please elaborate it. I'm not getting. – Darshan theerth Sep 06 '17 at 14:35
  • Can you edit the question and post the entire vue component? it will be easier to explain if i see the whole component – Tomer Sep 06 '17 at 14:38
  • I don't understand what is the problem, give r_id a default value of the class you want and when the user clicks the button r_id will change and the class will change as well – Tomer Sep 07 '17 at 07:02