显示多个到多个关系结果，并将它们按相同的id分组。

Question

​

methods : {

    fetch(){
    
          axios.get('api/parcels/to-pack')
          .then(response => this.parcels = response.data)
          .catch(error => console.log(error.response.data));

        } , 
        
    

} 

		<div class="todo animated fadeinright delay-1" id="test1">
			<p class="todo-element" v-for="(parcel,index) in parcels" :key="parcel.id">
				<delivery-parcel :parcel="parcel"></delivery-parcel>
        
       
        
        
			</p>
		</div>
    
    
    
    DeliveryParcel Component : 
    

          <input :id="'todo'+id" type="checkbox" :checked="isPacked">

      <label :for="'todo'+id">Parcel : {{ id }}</label> 

      <span>Owner : {{ name }}</span>

      <span>Medicine ID : {{ medicine_id }} - {{ qty }} pcs </span>

​

• 在我的结果:我有结果 ( parcel_id :2 package_id :4 quantity : 3，owner：{ id : 4030523，name：'john‘，}，}，{ parcel_id :2 package_id :5 quantity : 6，owner：{ id : 4030523，name：'john’，其他字段}， 我想要的只是通过他们的公用键parcel_id来显示结果。我当前的视图显示如下：

​

​

但是我想要的是显示它们，就像按它们的公用键( parcel_id )分组一样

所以就像

[]包裹:1

Medicine_id :3-3 3pcs

Medicine_id :2-3 3pcs

Medicine_id :1-5 5pcs

包裹: 11

Medicine_id :3-3 3pcs

Medicine_id :2-3 3pcs

Medicine_id :1-5 5pcs

Answer 1

只需创建一个新的计算属性来转换数据并使用它，也许如下所示：

data() { 
    jsonData: [ /* ... */ ]
},
created() { /* ... */ },
computed: {
    transformedData() {
        return this.jsonData.reduce((acc, curr) => {
            const parcelId = curr.parcel_id; 
            if (Array.isArray(acc.parcelId)) {
                acc[parcelId].push(curr);
            } else {
                acc[parcelId] = [curr];
            }
            return acc;
        }, {});        
    }
}