保留原始prop值以通过vue.js进行订购

Question

我正在尝试制作一个可以订购商品的组件。

• asc
• desc
• 初始化订单

到目前为止，这是我的代码：

  export default {
    name: 'List',
    components: {
      ListItem,
    },
    props: {
      items: Array,
    },
    data() {
      return {
        itemsMutated: this.items,
        order: {
          key: null,
          direction: null,
        },
      };
    },

在创建后，我正在复制项目数组以使其具有初始化状态，稍后我将使用

created: function() {
  this.itemsInit = JSON.parse(JSON.stringify(this.items));
}

我的方法

methods: {
  itemsMutate(key, direction) {
    let itemsOrdered = this.itemsInit;

    if (key && direction) {
      itemsOrdered = this.itemsOrder(itemsOrdered, key, direction);
    }

    // Further on also filtering data and again needing init items.
    // ...

    this.itemsMutated = itemsOrdered;
  },
},

最后是组件

<ListItem
  v-for="(item, index) in itemsMutated"
  :key="index"
  :item="item"
/>

但是我认为this.itemsInit在某种程度上是被动的。意思是当我使用asc方向，然后使用desc方向并且最后不使用任何参数时，更改不会反映出来。

我认为这是有原因的，this.itemsInit已经被更改（使用asc和desc），因为我看到它上面有观察者-这不应该发生，初始化项应该从未更改过。

任何帮助都会很好。如果您需要更多详细信息，我很乐意提供。并感谢您的努力。