How to render block conditionally using vue.js? - vue.js

Question

var app = new Vue({
el: '#app',
data: {
products:[
{
product_id:'21221312',
product:[
{variation:'paper', price:'12'}
]
},
{
product_id:'2122131212',
product:[
{variation:'ebook', price:'122'}
]
},
{
product_id:'21221312212',
product:[
{variation:'aduio', price:'1322'}
]
},
]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<div id="app">
<div v-for="(product, index) in products">
<div v-for="variant in product.product">
<p v-if="variant.variation === 'paper'">
{{variant.price}}
</p>
<p v-if="variant.variation==='ebook'">
{{variant.price}}
</p>
<p v-if="variant.variation==='aduio'">
{{variant.price}}
</p>
</div>
</div>
<div>
I am just start learning Vue.js, I have this problem how i can to render variation price conditionally, for example if variation contains paper i want to render only paper not ebook and audio, is this possible with v-if satement?
products:[
{
product_id:'21221312'
variations: [
{
variation:'paper',
price:'44'
},
{
variation:'ebook',
price:'41'
},
{
variation:'audio',
price:'40'
}
],
},
{
product_id:'212213132'
variations: [
{
variation:'paper',
price:'44'
},
{
variation:'ebook',
price:'41'
},
{
variation:'audio',
price:'40'
}
],
},
]

Answer 1

The way you are writing your markup is redundant, whether it be audio, ebook, or paper, it will still just render the price. might as well remove all those v-ifs since they all end up doing the same thing. You can display everything inside the variant and it will display correctly what the product has.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<div id="app">
<div v-for="(product, index) in products">
<div v-for="variant in product.product">
<p>
Type: {{variant.variation}} | Price: {{variant.price}}
</p>
<p>
</p>
</div>
</div>
<div>
You can check out this JSFiddle of your issue to see how it works and play around with it if you would like