如何通过单击其中一个子组件来更新 Vue 组件数组

Question

我正在显示一个子组件数组，在子组件中，我需要单击一些文本以使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循环的开头。 我给出的建议是我觉得我得到的最接近的建议，然而，它什么也没做。 我还没有看到网上有人真的这样做，所以我想我会来这里问。

Answer 1

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

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

孩子：

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

然后在父changeLocation function 我们使用索引重新排序数组：

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

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