Vue. Возможность перетаскивания в v-не работает (vuex) - PullRequest
Новая
       4

Vue. Возможность перетаскивания в v-не работает (vuex)

0 голосов
/ 03 апреля 2020

я использую следующую библиотеку lib https://github.com/SortableJS/Vue.Draggable

мой шаблон выглядит так: 

<div class="col" v-for="column in columns" :key="column.id">
  <div class="col-header">{{ column.title }}</div>
  <draggable v-model="myList" draggable=".card" group="tasks">
    <div class="card" v-for="(task, index) in column.tasks" :key="task.id">
      <div class="card-header">
        {{ task.title }}
        <input type="button" @click="removeTask({column, index})" value="x" />
      </div>
      <div class="card-content">{{ task.description }}</div>
    </div>
  </draggable>
</div>

вычислено: 

myList: {
  get() {
    return this.$store.state.columns;
  },
  set(value) {
    this.$store.commit("updateList", value);
  }
}

и следующее состояние vuex: 

state: {
    columns: [
      {
        id: 1,
        title: "Not Started",
        tasks: [
          {
            id: 1,
            title: "Documentation",
            description: "Creating the Documentation for the Project."
          },
          {
            id: 2,
            title: "Drag'n Drop",
            description: "Creating the Drag'n Drop functionality."
          }
        ]
      },
      {
        id: 2,
        title: "In Progress",
        tasks: [
          {
            id: 3,
            title: "CSS Fixing",
            description: "Bug fixing the CSS Framework."
          }
        ]
      },
      {
        id: 3,
        title: "Done",
        tasks: [
          {
            id: 4,
            title: "HTML Layout",
            description: "Creating the basic HTML5 layout."
          }
        ]
      }
    ]
  }

мутации: 

updateList: (state, value) => {
  state.columns = value;
}

Итак, у меня есть три столбца, и я хочу перетащить задачу из одного столбца в другой, в результате чего 2 задачи будут удалены а также выполнение updateList дважды и перетаскивание внутри одного столбца добавляет задачу к другому.

...