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 doe' ,
}
}, { parcel_id : 2
package_id : 5
quantity : 6,
owner : {
id : 4030523 , name : 'john doe' ,
other fields...
}
},
},
]
Я хочу просто отобразить результаты по их общему ключу, который является parcel_id. Мой текущий вид выглядит следующим образом:
Но я хочу показать их как их сгруппированные по их общему ключу, который является parcel_id
так что-то вроде
[] Посылка: 1
Medicine_id: 3 - 3шт
Медицина: 2 - 3 шт.
Medicine_id: 1 - 5 шт.
[] Посылка: 11
Medicine_id: 3 - 3шт
Медицина: 2 - 3 шт.
Medicine_id: 1 - 5 шт.
Просто создайте новое вычисляемое свойство, чтобы преобразовать ваши данные и использовать их вместо этого, возможно, что-то вроде этого:
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;
}, {});
}
}