Vue - bind a css class name with a property value

Question

I would like to set a class to a child component based on in which parent component I am using it. So, for example, I have a dropdown menu, that I would like to use in more components, but I would like to give it a different class based on in which component I am using it. Something like this, parent component top-bar:

<dropdown-menu :menu="link" :parent:'top-bar'></dropdown-menu>

And then in the dropdown-menu component:

<div class="dropdown" :class="{ parent: parent }">

<script>
  export default {
    name: 'dropdown-menu',
    props: ['parent'],

But, that is not working, how can I do this?

Not sure if this is the only problem but i believe :parent:'top-bar' should be :parent='top-bar'. — Wouter Vandevelde
– Wouter Vandevelde, Commented Nov 2, 2017 at 8:23

tony19 · Accepted Answer · 2022-07-15 22:56:53Z

You had a typo :parent:'top-bar' -> :parent='top-bar' and your class binding would always pass the 'parent' string as a class. Learn more here.

I also made a small working example:

Vue.component('parent1', {
  template: '<div><dropdown-menu :menu="link" :parent="top_bar"></dropdown-menu></div>',
  data () {
      return {
          link: 'a link',
          top_bar: 'parent1'
      }
  }
});

Vue.component('parent2', {
  template: '<div><dropdown-menu :menu="link" :parent="top_bar"></dropdown-menu></div>',
  data () {
      return {
          link: 'another link',
          top_bar: 'parent2'
      }
  }
});

Vue.component('dropdown-menu', {
  template: '<div class="dropdown" v-bind:class="parent">{{ menu }}</div>',
  props: ['parent', 'menu']
});

var vm = new Vue({
  el: '#app'
});

.parent1 {
    color: red;
}

.parent2 {
    color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>

<div id="app">
  <parent1></parent1>
  <parent2></parent2>
</div>

Collectives™ on Stack Overflow

Vue - bind a css class name with a property value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related