How to add dynamic class name in button present on Child Component when clicking another button from Parent Component?

1
votes

I have a nuxt.js application, I want to add class name to a button(dynamic button) present in Child Component when a button present in Parent Component is clicked. I have tried using Event Bus, it is able to send event from parent to child but the dynamic class is not getting appended to the button. The dynamic button will highlight the CSS effect. Any suggestions or guide is highly appreciated.

#Parent Component

<ChildComponent :id="id"/>
<button @click="sendMessageToChild()" class="btn btn-block btn-primary">Click Here</button>
                  
methods: {
    sendMessageToChild() {
        this.$root.$emit('highlight')
    },
}

Child Component

<button  class="btn btn-primary btn-block text-center rounded":class="{ highlight }">Buy</button>
<button  class="btn btn-primary btn-block text-center rounded":class="{ highlight }">Buy</button>
<button  class="btn btn-primary btn-block text-center rounded":class="{ highlight }">Buy</button>
<button  class="btn btn-primary btn-block text-center rounded":class="{ highlight }">Buy</button>

data() {
    return {
        highlight: false,
        timer: null,
    }
},
mounted() {
    this.$root.$on('highlight', () => {
        this.highlight()
    })
},
methods: {
    highlight() {
        this.highlight = true
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
            this.highlight = false
        }, 2000)
    },
}

#CSS effect on click of button Click Here , this should be highlighted to all the dynamic button in Child Component #CSS in child component

.highlight {
    background:orange,
    color:#fff;
    border:1px #000 solid;
}

My answer after editing

Parent Component :

Click Here 
data() {
    return {
        highlight: false,
        timer: null,
    }
},
methods: {
    sendMessageToChild() {
        this.highlight = true
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
            this.highlight = false
        }, 2000)
    },
}

.highlight {
    animation: shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both infinite;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

Child Component :

<button  class="btn btn-primary btn-block text-center rounded":class="{ highlight }">Buy</button>
<button  class="btn btn-primary btn-block text-center rounded":class="{ highlight }">Buy</button>
<button  class="btn btn-primary btn-block text-center rounded":class="{ highlight }">Buy</button>
<button  class="btn btn-primary btn-block text-center rounded":class="{ highlight }">Buy</button>

props: {
    id: {
        type: Number,
        required: true,
    },
    highlight: {
        type: Boolean,
        required: false,
    },
},
1
vue.jsnuxt.js

1 Answers

2
votes

The interaction between parent and child component should be done using prop instead of event, you could define highlight as data property in parent and pass it as prop to child component :

parent :

<ChildComponent :id="id"   :highlight="highlight"/>
<button @click="highlight"  class="btn btn-block btn-primary">Click Here</button>
  ...
data() {
    return {
        highlight: false,
        timer: null,
    }
},

methods: {
    highlight() {
        this.highlight = true
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
            this.highlight = false
        }, 2000)
    },

}

child component :

<button  class="btn btn-primary btn-block text-center rounded":class="{ highlight }">Buy</button>
<button  class="btn btn-primary btn-block text-center rounded":class="{ highlight }">Buy</button>
<button  class="btn btn-primary btn-block text-center rounded":class="{ highlight }">Buy</button>
<button  class="btn btn-primary btn-block text-center rounded":class="{ highlight }">Buy</button>

...

props:["highlight"]