[Vuejs]-Trying to put multiple conditions inside one loop vue.js

by

-1👍

component Paid:

<template>
    <th class="plan-header blue">
        <div class="pricing-plan-name">Not Free and not Recommended</div>
        <div class="pricing-plan-price">
            <sup>$</sup>{{item.price}}0<span>.00</span>
        </div>
        <div class="pricing-plan-period">month</div>
    </th>
</template>

export default{
    props: ['item']
}

component Free:

<template>
    <th class="plan-header free">
        <div class="pricing-plan-name">Free</div>
        <div class="pricing-plan-price">
            <sup>$</sup>{{item.price}}0<span>.00</span>
        </div>
        <div class="pricing-plan-period">month</div>
    </th>
</template>

export default{
    props: ['item']
}

component Recommended:

<template>
    <th class="plan-header plan-header-standard">
        <div class="inner">
            <!--<span class="plan-head"> </span>-->
            <span class="recommended-plan-ribbon">RECOMMENDED</span>
            <div class="pricing-plan-name">STANDARD</div>
            <div class="pricing-plan-price">
                <sup>$</sup>{{item.price}}34<span>.99</span>
            </div>
            <div class="pricing-plan-period">month</div>
        </div>
    </th>
</template>

export default{
    props: ['item']
}

your loop code:

<template v-for="Record in Records">
    <component :item="Record" :is="Record.Is_Free?'Free':Record.Is_Recommended?'Recommended':'Paid'"></component>
</template>

const Free = {
  template: '#Free',
  props: ['item']
},Paid = {
  template: '#Paid',
  props: ['item']
},Recommended = {
  template: '#Recommended',
  props: ['item']
}

var app = new Vue({
  el: '#app',
  components: {Free,Paid,Recommended},
  data () {
    return {
      list: [{
        id: 1,
        text: 'free product',
        isFree: true,
        isRecommended: true
      },{
        id: 2,
        text: 'Not Free and not Recommended',
        isFree: false,
        isRecommended: false
      },{
        id: 3,
        text: 'Recommended',
        isFree: false,
        isRecommended: true
      }]
    }
  }
})		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<div id="app">
	  <table>
	    <thead>
	      <template v-for="item in list">
	        <component :item="item" :is="item.isFree?'Free':item.isRecommended?'Recommended':'Paid'"></component>
	      </template>
	    </thead>
	  </table>
	</div>
	<script type="text/x-template" id="Free">
	    <th class="plan-header free">
	        <div class="pricing-plan-name">Free</div>
	        <div class="pricing-plan-price">
	            <sup>$</sup>{{item.price}}0<span>.00</span>
	        </div>
	        <div class="pricing-plan-period">month</div>
	    </th>
	</script>
	<script type="text/x-template" id="Paid">
	    <th class="plan-header blue">
	        <div class="pricing-plan-name">Not Free and not Recommended</div>
	        <div class="pricing-plan-price">
	            <sup>$</sup>{{item.price}}0<span>.00</span>
	        </div>
	        <div class="pricing-plan-period">month</div>
	    </th>
	</script>
	<script type="text/x-template" id="Recommended">
	    <th class="plan-header plan-header-standard">
	        <div class="inner">
	            <!--<span class="plan-head"> </span>-->
	            <span class="recommended-plan-ribbon">RECOMMENDED</span>
	            <div class="pricing-plan-name">STANDARD</div>
	            <div class="pricing-plan-price">
	                <sup>$</sup>{{item.price}}34<span>.99</span>
	            </div>
	            <div class="pricing-plan-period">month</div>
	        </div>
	    </th>
	</script>

-1👍

Personally I wouldn’t do this inside for loop, for many reasons, and also would store type of every option which would reflect class (no need to condition update in future, just styles) but here you are:

<th v-for="Record in Records" class="plan-header" :class="{free: Record.Is_Free, 'blue': !Record.Is_Free && !Record.Is_Recommended, 'plan-header-standard': Record.Is_Recommended}">
    <span v-if="Record.Is_Recommended" class="recommended-plan-ribbon">RECOMMENDED</span>
    <div class="pricing-plan-name">{{ Record.Description }}</div>
    <div class="pricing-plan-price">
        <sup>$</sup>{{Math.floor(price)}}<span>{{(price+"").split(".")[1]}}</span>
    </div>
</th>

Leave a comment