vue-draggable - не может изменить мой массив напрямую

Question

Я использую vue-draggable изменить порядок элементов массива. Допустим, мой массив:

data: {
 array1: [{text: 'text1'},{text: 'text2'},{text: 'text3'}]
}

в моем шаблоне я просто использую:

<draggable v-model="array1" >
v-for etc...
</draggable>

И это работает нормально.

Теперь я должен переместить свой код внутри компонента и использовать array1 как опора.

Так что я двигаю array1 для поддержки внутри дочернего компонента:

props['array1'],

Я использую свой vue-draggable и bam: "[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders."

Я не могу просто заявить array1 внутри данных, потому что это асинхронно. Так что я пишу это внутри вычисляется:

   array2: {
      get: function () {
        //return JSON.parse(JSON.stringify(this.array1))          
        return this.array1.slice()          
      },
      set: function () {
        this.array2
      }
  },

и это, очевидно, не сработает, потому что getter всегда жестко закодирован как slice() prop. Я задал вопрос вчера здесь: Vuejs вычисленный установщик данного свойства не реагирует

Так что советую написать что-то новое и добавить оператор if внутри array2 вычислено:

   array2: {
      get: function () {
        if (this.modifiedArray) {
            return this.modifiedArray;
        }
        //return JSON.parse(JSON.stringify(this.array1))          
        return this.array1.slice()          
      },
      set: function () {
        this.proTemplate
      }
  },

и у меня есть проблема с обращением vue-draggable изменений к модифицированному Array, вычисленному, потому что я не могу изменить v-модель внутри draggable:

<draggable v-model="array2">

Кто-нибудь знает, как изменить его, чтобы получить перетаскиваемый результат во внешнем массиве / вычисляется?

Answer 1

Я пытался повторить то, что я понимаю, о вашей проблеме здесь

Я использовал clone метод из библиотеки Lodash, чтобы предотвратить "[Vue warn]: Avoid mutating a prop directly..." ошибка.

Надеюсь, поможет