如何通过单击子组件之一来更新组件的 Vue 数组

如何解决如何通过单击子组件之一来更新组件的 Vue 数组

我正在显示一个子组件数组，在子组件中，我需要单击一些文本以使 THIS 子组件推送到数组的前面。我已经尝试过，孩子看到的数组似乎没有任何帮助。现在我已经尝试向父组件发送一个事件，但我似乎仍然无法弄清楚如何通过单击 IN 子组件将任何子组件推送到循环的开头.

父组件和方法：

 <location-item v-for="(location,index) in results"
                       :key="location.Id"
                       :index="index"
                       :location="location"
                        @changeLocation="changeLocation(location,$event)" />

methods(): {
      changeLocation(location,newIndex) {
           location.index = newIndex;
    },}

子组件的可点击文本和方法

<a @click="changeCurrent">
   Change Location
</a>

methods: {
      changeCurrent() {
        this.$emit('changeLocation',this.newIndex);
      }
},

所以当它在子组件中被点击时，它会将 THAT 子组件抛出到 v-for 循环的开头。我给出的建议是我觉得最接近的，然而，它什么也没做。我还没有在网上看到任何人真的这样做，所以我想我会来这里问。

解决方法

这在很大程度上是一个 JavaScript 问题。您在从孩子到父母的发射方面走在正确的轨道上，需要使用 splice() 做一些 javascript。

由于您已经将子组件的索引传递给组件，这是我们唯一需要传递给父组件的东西，所以...

孩子：

props: {
  location: String,index: Number,},methods: {
  changeCurrent() { // pass the childs index to parent
    this.$emit("change-location",this.index);
  },

然后在父 changeLocation 函数中我们使用索引对数组进行重新排序：

changeLocation(index) {
  let item = this.results.splice(index,1); // remove item from array
  this.results.splice(0,item[0]); // put item first in array
},

这是给您的 DEMO。您也可以使用 unshift 添加项目。