Vuejs从上到下添加项目

Question

我有一个代码：

<comment-form @created="add"></comment-form>

<div v-for="(comment, index) in items" :key="comment.id">
   <comment :data="comment"></comment>
</div>

在mixin中我有方法，当event为created时，我会处理这个方法：

methods: { 
  add(item) {
     this.items.push(item);
     this.$emit('added');
  }
}

当我添加新评论时，此评论出现在下面。如何反转并在添加新评论时将其显示在所有评论中？

我试过了：

v-for="(comment, index) in items.slice().reverse()"

但是不起作用，评论还是会自上而下。

Answer 1

以下是更新后的代码：

methods: { 
  add(item) {
     this.items. unshift(item);
     this.$emit('added');
  }
}

基本上，push()会在array的末尾添加元素

unshift()将在前面(第0个索引)位置添加元素。

splice('insertAtIndex', 0, 'stringToBeInserted')将用于在数组的特定索引处添加元素。