渲染主题后如何对组件进行resort

How to resort components after rendering theme

假设我有一个循环遍历的数组（地图中的位置）：

<div class="row" v-for="place in places">
        <place :place="place" v-if="place.distance"></place>
</div>

在页面中呈现组件之后。数组得到更新，所以我想在数组更新后重新排列页面中的组件。 有没有办法做到这一点，或者只是停止组件，直到数组更新（我要求 google 的地理定位），然后以正确的顺序呈现它们（按位置之间的距离排序）

如评论所述，您不需要为此做任何事情，vue 包装了观察到的数组的变异方法，因此它们也将触发视图更新，如解释的那样 here。包装的方法是：

  • 推送()
  • 弹出（）
  • 移位()
  • 取消移位()
  • 拼接()
  • 排序()
  • 反转()

你可以在这里看到工作演示是如何重新排列的here。

示例 JS 代码：

Vue.component('comp2', {
  props: ['title'],
  template: '#comp2'
})

new Vue({
    el: '#app',
  data: {
    compArray: ['comp1', 'comp2', 'comp3']
  },
  methods: {
    resuffle: function() {
       this.compArray.splice(0,1)
       this.compArray.push(this.compArray[0])
    }
  },
})

相关HTML:

  <div v-for="comp in compArray">
      <comp2 :title="comp">
  </div>