Esta es una pregunta difícil... Tengo una matriz como
[{'city':'LA','store':'Bobs Burgers'},{'city':'LA','store':'Burger King'},{'city':'Sacramento','store':'Jimmy Burger'}]Si estoy recorriendo estas hamburgueserías en una tabla y quiero agregar una fila cuando cambie la ciudad, ¿cómo hago eso?
En PHP haría
<?php foreach ($store in $burgerplaces){ if ($store['city']!=$prev_city){ # show header for the city } #print store info $prev_city=$store['city']; } ?>Si entendí correctamente, intente seguir el siguiente fragmento (en la propiedad calculada, primero ordene su matriz, luego haga un bucle, compare ciudades y agregue un objeto vacío antes de la próxima ciudad):
new Vue({ el: "#demo", data() { return { burgers: [{'city':'LA','store':'Bobs Burgers'},{'city':'Sacramento','store':'Jimmy Burger'},{'city':'LA','store':'Burger King'}, {'city':'NY','store':'Burgers'}] } }, computed: { byCities() { const arr = this.burgers.sort((a,b) => { const nameA = a.city.toUpperCase(); const nameB = b.city.toUpperCase(); if (nameA < nameB) { return -1; } if (nameA > nameB) { return 1; } return 0; }) const res = [] for(let i = 0; i < arr.length; i++){ if (i ===0 || arr[i].city !== arr[i-1].city) { res.push({city: arr[i].city.toUpperCase()}) } res.push(arr[i]) } return res } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <li v-for="(burger, i) in byCities" :key="i"> {{ burger.city }} {{ burger.store }} </li> </div>