VueJS: использовать вычисленные «set / get» с Vue.Draggable и VueX - PullRequest
Новая
       22

VueJS: использовать вычисленные «set / get» с Vue.Draggable и VueX

0 голосов
/ 23 октября 2018

Я ищу помощи с "Vue.Draggable".Второй день я пытаюсь правильно обновить перетаскиваемый массив.

Задача:

  • обновить перетаскиваемый массив с помощью вычисленных функций set / get
  • получить перетаскиваемый элементсвойства, включая информацию о родительском элементе и функцию axios вызова для обновления данных в MySQL.

Образец данных: 

{ cat1: { authors: [ { name: "Name 1" }, { name: "Name 2" } ] }, cat2: { authors: [ { name: "Name 3" }, { name: "Name 4" } ] } }

Код рендеринга: 

<div v-for="(category, index) in categories">
    <draggable v-bind:id="index" v-model="category.authors" :options="{group:'authorslist', draggable:'.author'}" class="draggable-row" >
    <div v-for="author in category.authors" :key="author.id" class="author" >

Что я пытаюсь сделать:

На самом деле, упомянутая конструкция работает нормально.Но только визуально.VueX выдает ошибку о процессе мутации.

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers." Error: [vuex] Do not mutate vuex store state outside mutation handlers.

Замена v-model на :value помогает, но в этом случае D & D не работает даже визуально.

Я перепробовал много вариантов ... Один из них - создатьвычисляемое свойство для «категорий» и использовать функции «получить / установить» для вызова actions->mutations из них.Проблема в том, что categories->set функция не работает, когда мы меняем authors структуру массива.

Вторая проблема - перетаскивание author между categories таким образом, что это позволяет нам получитьID автора и категории, чтобы использовать его в запросе Axios.

Я пытался использовать событие @end, НО (!) это работает только для процесса сортировки, но не для D & D между родительскими элементами (категориями).

Буду очень признателен за любую помощь!

1 Ответ

0 голосов
/ 25 декабря 2018

Чтобы избежать прямого изменения состояния хранилища, вы должны использовать вычисленное значение и использовать действие хранилища.Что-то вроде: 

<draggable :id="index" v-model="authors" :options="{group:'authorslist', draggable:'.author'}">

И: 

computed:{
 authors: {
        get() {
            return this.$store.state.authors
        },
        set(value) {
            this.$store.commit('updateAuthors', value)
        }
    }
}
...