Vue Array Object Loop Iteration

By ukmodak | May 18th 2022 09:26:00 AM | viewed 466 times

Object iteration in template

<span v-for="(itemLabel,i) in form.detailLabelAndField" :key="itemLabel.label">
                                      <span v-if="itemLabel.field=='item_category_id'">
                                           <th :class="'text_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th>
                                      </span>
                                       <span v-else-if="itemLabel.field=='item_id'">
                                         <th :class="'text_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th>
                                      </span>
                                      <span v-else-if="itemLabel.field=='rate'">
                                         <th :class="'no_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th>
                                      </span>
                                       <span v-else-if="itemLabel.field=='qty'">
                                             <th :class="'no_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th>
                                      </span>
                                       <span v-else-if="itemLabel.field=='total_discount'">
                                          <th :class="'no_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th>
                                      </span>
                                       <span v-else-if="itemLabel.field=='total_amount'">
                                             <th :class="'no_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th>
                                      </span>
                                      <span v-else-if="itemLabel.field=='is_fire'">
                                          <th :class="'text_field2 sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th>
                                      </span>
                                
</span>


if else condition in template


<span v-if="itemLabel.field=='item_category_id'">
   <th :class="'text_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th>
</span>
<span v-else-if="itemLabel.field=='item_id'">
 <th :class="'text_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th>
</span>
<span v-else-if="itemLabel.field=='rate'">
 <th :class="'no_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th>
</span>
<span v-else-if="itemLabel.field=='qty'">
	 <th :class="'no_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th>
</span>
<span v-else-if="itemLabel.field=='total_discount'">
  <th :class="'no_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th>
</span>
<span v-else-if="itemLabel.field=='total_amount'">
	 <th :class="'no_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th>
</span>
<span v-else-if="itemLabel.field=='is_fire'">
  <th :class="'text_field2 sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th>
</span>
                                


Range Function in script

range(start, end){
         if (!end) {
           end = start;
           start = 0;
         }
         start -= 1;
         end -= 1;
         let arr = [];
         while (start++ !== end) {
           arr.push(start);
         }
         return arr;
       },

object declaration and setting value in script

let eachRecord ={};
         Vue.set(eachRecord,'is_delete',false);
         Vue.set(eachRecord, 'is_check',false);
		 
		
        

Array Declaration and set value,add value and deletion:

data() {
      return {
       
			dtl: {
				 count:1,
				 totalLoop:this.range(0,1),
				 iterateLoop:[], 
				 fieldModel:[],
				}
			}
		}
		
		 this.dtl.fieldModel[index].is_delete ='true';
         this.dtl.fieldModel.splice(index,1);
         this.dtl.totalLoop.splice(index,1);
		 
		  addMore(){
           
              this.dtl.totalLoop.push(this.dtl.count++);
              this.dtl.iterateLoop.push({'loop':(this.dtl.totalLoop.length-1)});

              this.setFieldModel(this.dtl.totalLoop.length-1);

              return this.dtl.iterateLoop;

            },

Array of object declaretion and iteration in script


let  detailLabelAndField:[{'label':'Item Category','field':'item_category_id','show_item_category_name':'item_category_name'},{'label':'Item Name','field':'item_id','show_item_name':'item_name'},{'label':'Rate','field':'rate'},{'label':'QTY','field':'qty'},{'label':'Discount','field':'total_discount'},{'label':'Total','field':'total_amount'},{'label':'Is Order Placed?','field':'is_fire'}];
         
		 
		 detailLabelAndField.forEach(function(detail,j){
                if(detail.field == "item_category_id"){
                  Vue.set(eachRecord,detail.field,'');
                   Vue.set(eachRecord,detail.show_item_category_name,'');
                }else if(detail.field == "item_id"){
                    Vue.set(eachRecord,detail.field,'');
                    Vue.set(eachRecord,detail.show_item_name,'');
                }else{
                   Vue.set(eachRecord,detail.field,'');
                }
               
         });
		 
		 
		 
		 this.$store.dispatch('getPosCompanyFilterList',{})
                   .then(()=>{
                        if(this.$store.getters.allPosCompany[0].id){
                              let allCom =[];
                            this.$store.getters.allPosCompany.forEach(function(value, key){
                                 let comLis ={
                                      text:value.name,
                                      value:value.id
                                  };
                                  allCom.push(comLis);
                            });
                              this.companyListObject = allCom;
                            
                         }
                  });
				  
				  
				  
	    let indexOfItemObject =null;
        indexOfItemObject = this.itemListObject.map(item => item.id).indexOf(itemId);
		
		if(event.target.checked){

                       // searcing  temListObjectArray and update input value 

                  this.itemListObject[indexOfItemObject].is_check = event.target.checked;
                  this.itemListObject[indexOfItemObject].update_qty = this.no_of_qty[itemId];
                  this.itemListObject[indexOfItemObject].modal_discount = this.modal_discount[itemId];
				  this.itemListObject.splice(indexOfItemObject,1);
				 
		}
bONEandALL
Visitor

Total : 20681

Today :12

Today Visit Country :

  • United States
  • China
  • Russia