[Vuejs]-How to style parent if child has class in vue?

-2👍

✅

Try this:

new Vue({
  el: "#app",
  data: {
    isExample: true,
  },
  created() {
    setInterval(() => {
      this.isExample = !this.isExample
    }, 2000)
  },
  computed: {
    parentClasses() {
      return ['parent', this.isExample ? 'container' : null];
    },
    childClasses() {
      return ['child', this.isExample ? 'example' : null]
    }
  }

})
.container {
  background: tomato;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
  <div :class="parentClasses">
    parentClasses: {{parentClasses}}
    <div :class="childClasses">childClasses: {{childClasses}}</div>
  </div>
</div>

Leave a comment