如何在渲染主题后求助组件

Question

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

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

在页面上呈现组件之后。数组得到更新，所以我想在更新数组后重新排列我的页面中的组件。 有没有办法做到这一点或只是停止组件，直到阵列更新（我呼吁谷歌的地理定位），然后以正确的顺序（按位置之间的距离排序）进行渲染

Answer 1

如上所述，您不需要为此做任何事情，vue会包含观察到的数组的变异方法，因此它们也会按照here所述触发视图更新。包装的方法是：

• 推（）
• pop（）方法
• 移（）
• 的unshift（）
• 剪接（）
• 排序（）
• 反向（）

您可以在此处查看有关重新排列{* 3}}的工作演示。

示例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>