Issue
I want to add a conditional style in my Component. My component is below:
<site-pricing
color="primary"
currency="$"
price="25"
to="/purchase"
>
<template v-slot:title>Complete</template>
<template v-slot:desc>{{ $t('plans.completeDesc' )}}</template>
<template v-slot:planSuffix>/ {{ $t('plans.oneTime' )}}</template>
<template v-slot:features>
<ul>
<li>{{ $t('plans.xchats', [ 200 ] )}}</li>
<li>{{ $t('plans.sDomain' )}}</li>
</ul>
</template>
<template v-slot:footer>{{ $t('plans.oneTime' )}}</template>
</site-pricing>
I want to add a special style just like, if 'color = primary', then add a border-top: 5px red...
Solution
You should use the conditional style binding for vue. I'll show an example:
new Vue({
el: '#app',
data: {
color: "secondary"
},
methods: {
toggleColor(val) {
this.color = val
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div :style="[color==='primary' ? {color: 'red'} : {color: 'blue'}]">Primary</div>
<div :style="[color==='secondary' ? {color: 'red'} : {color: 'blue'}]">Secondary</div>
<button @click="(e) => toggleColor('primary')">Switch to pirmary</button>
<button @click="(e) => toggleColor('secondary')">Switch to secondary</button>
</div>
Answered By - Daniyal Lukmanov Answer Checked By - Cary Denson (PHPFixing Admin)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.