[Vuejs]-Tried to apply css to a component conditionally using prop but its not working

by

0👍

Is it what you want?

your component:

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

script:

export default {
  props: {
    className: {
      default: 'storyWeb'
    }
  }
}

usage:

<story :story="stories[0]"/>
<story :story="stories[0]" class-name="storyMobile"/>

Vue.component('story',{
  template: `<div :class="className">test</div>`,
  props: {
    className: {
      type: String,
      default: 'storyWeb'
    },
    story: {
      type: Object,
      required: true
    }
  }
})

var app = new Vue({
  el: '#app',
  data () {
    return {
      stories: [
        {content: 'sotry1 content'},
        {content: 'story2 content'}
      ]
    }
  }
})
.storyMobile{
  color:green;
}
.storyWeb{
  color:red;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <story :story="stories[0]" class-name="storyMobile"></story>
  <story :story="stories[1]"></story>
</div>

Leave a comment