VueJS v-for循环，检测对象中的前一个元素是否不同？（更改城市等）

Question

这很难...我有一个像

这样的数组


[{'city':'LA','store':'Bobs Burgers'},{'city':'LA','store':'Burger King'},{'city':'Sacramento','store':'Jimmy Burger'}]

如果我在 table 中循环浏览这些汉堡店，并且我想在城市变化时连续添加，我该怎么做？

在PHP我会做


<?php
foreach ($store in $burgerplaces){

if ($store['city']!=$prev_city){
   # show header for the city 
}

#print store info

$prev_city=$store['city'];

}
?>

Answer 1

如果我理解正确，请尝试以下代码片段（在计算中属性首先对数组进行排序，然后循环，比较城市并在下一个城市之前添加空对象）：

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>

VueJS v-for循环，检测对象中的前一个元素是否不同？（更改城市等）

VueJS v-for loop, detect if previous element in object was different? (Change cities, etc)

javascript

vue.js

vuejs3

VueJS v-for循环，检测对象中的前一个元素是否不同？ （更改城市等）

VueJS v-for loop, detect if previous element in object was different? (Change cities, etc)

javascript

vue.js

vuejs3

VueJS v-for循环，检测对象中的前一个元素是否不同？（更改城市等）