[Vuejs]-How to merge two column which have same value into one column given they are sharing the similar product id?

by

0👍

With the information provided, it is hard to tell where you get the list under column "names",
But assuming you get the "names" as property from labels—

Try to clean your duplicates straight after the axios call

...
...
methods: {
   getProductPromoteReport(){
      this.loading = true
      axios.get("/api/merchant/live/getProductPromoteReport")
       .then(response => {
             if(response.data){
             this.labels = this.removeDuplicates(response.data.labels)
             this.loading = false
       })
       .finally(()=>this.loading = false)
    },
    removeDuplicates(labels) {
       if(!labels) return[];
       let uniqueLabels = [];
       labels.forEach((label) => {
           if(uniqueLabels.find((uniqElem)=> uniqElem.product_id== label.product_id) == null){
               uniqueLabels.push(label);
            }
        });
       return uniqueLabels 
     }
   }

then you can just loop through the label items

<template slot="items" slot-scope="props">
  <tr>
    <td class="text-xs-left"><br>Product ID: {{props.item.product_id}}<br>Product Title: 
      {{props.item.title}}<br><br></td>
      <td class="text-xs-left">{{props.item.names}}</td>     
  </tr> 
 </template>

As stated, the part that is not clear is where the "names" come from so I just asume it’s called like that hence the {{props.item.names}}

Leave a comment