Attempting to conditionally apply CSS to a component based on a prop, but unfortunately it is not functioning as expected

Question

Attempting to conditionally apply CSS to a component based on a prop, but unfortunately it is not functioning as expected

.storyMobile{
color:green;
}
.storyWeb{
color:red;
}

<div class="storyMobile">
hii
</div>
<div class="storyWeb">
hii
</div>


//main view

  <div>
        <story   :story="stories[0]"/>
  </div>


//here it prints stories in red colour but I want it to be displayed in green colour - how can I do this?

This particular component has 2 divs with different classes, one for mobile and one for web.

<div class="storyMobile">
//code
</div>

 <div class="storyWeb">
//code
</div>

//this is my main view where I am importing this component

<div class="body-frame">
    <Header></Header>
    <section class="content-section-bar" v-if="stories && stories.length">

      <div>
        <story   :story="stories[0]"/>
      </div>
    </section>
</div>

The story component is by default set to web, so the "storyweb" class is applied. I want to change it to "storyMobile" class.

What is the best way to achieve this in vue.js considering I have tried using props without success?

html css vue.js prop

Answer 1

Answer №1

Is this what you desire?

Check out your component:

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

Here is the script:

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

See how to use it:

<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>

Answer 2

Is this what you desire?

Check out your component:

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

Here is the script:

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

See how to use it:

<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>

Attempting to conditionally apply CSS to a component based on a prop, but unfortunately it is not functioning as expected

Answer №1

Similar questions

IE9 is causing a bizarre problem where the entire page is suddenly jumping. It's

Jquery Menu featuring subitems aligned to the right

Center the content within the div

Using jQuery AJAX to Transfer Data to a PHP Script

Creating dynamically generated nested text inputs with individual v-model bindings upon the clicking of a button

The Prev and Next controls on the web carousel have mysteriously vanished

What is the best way to create divs that can close and hide themselves when clicked from inside the div itself?

Tips for distinguishing individual rows within a table that includes rowspans?

Hover effects in CSS animations can be hit or miss, with some working smoothly while others may

Include various categories into the div containers of the listed items within the query outcomes

Issues with displaying iframes on iOS devices, particularly iPhones

Revamping the Jquery Waypoint

Is there a way to prevent the context menu from appearing when tapping on an image on a mobile phone?

Is it possible to maintain a fixed footer while utilizing async/ajax functions?

Personalize the color of tags in streamlit

What steps should I take to host my Vue js single page application on my Django server?

Step-by-step guide on building a mat-table with nested attributes as individual rows

Troubleshooting z-index problem with background image and parent tag of image

Tips for locating a value that differs from an item in a v-autocomplete box

Steps to design a unique input radio button with embedded attributes