CODEWITHSUNDEEP
vue.jsvuejs2
Michael
Michael

Reputation: 13636

Style is not applied on HTML element

I use vue2 in my project.

I have property img_path and class txt-disabled:

<script> 
  export default {
    props: {
      img_path: { required: false },
      title: { required: false }
    },
    components: {  },
    computed: {},
    methods: {},
  };
</script>

<style>  
  .txt-disabled{
    color:lightgray;
  } 
</style>

when property is empty I want to apply txt-disabled css class on span the element:

 <span :class="{ img_path: txt-disabled }">{{title}}</span>

But on example above txt-disabled class not applied.

Any idea why class not applied?

Upvotes: 0

Views: 45

Answers (1)

akuiper
akuiper

Reputation: 215117

You need to put css class as the key, and the condition as value, see example here:

<span :class="{ 'txt-disabled': !img_path }">{{title}}</span>

Upvotes: 1

Related Questions