2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

複数の配列を用意してvuedraggableを使用する方法

Last updated at Posted at 2021-12-05

vuedraggableを使用した開発で、躓いた話です。
わかってしまえば簡単なことで、記事にするほどのことかと思いましたが、自分が躓いたと言うことは、もしかしたら誰か躓くことがあるかもしれないと思い、記事にすることにしました。

躓いたこと

ある配列の要素を、変数の数だけ空の配列を用意し、ドラッグ&ドロップできるようにしたかった。
検索して出てくるサイトではitem1,item2などdataに配列を定義した状態の記事は見つけられたが、どう定義していいかわからなかった。

index.vue
<template>
  <v-row>
    <v-col>
      <v-list>
        <v-list-item-title> アンパンヘッドボーイ </v-list-item-title>
        <draggable v-model="item1" group="item">
          <v-list-item v-for="item in item1" :key="item.id">
            {{ item.name }}
          </v-list-item>
        </draggable>
      </v-list>
    </v-col>
    <v-col>
      <v-list>
        <v-list-item-title> カバ </v-list-item-title>
        <draggable v-model="item2" group="item">
          <v-list-item v-for="item in item2" :key="item.id">
            {{ item.name }}
          </v-list-item>
        </draggable>
      </v-list>
    </v-col>
    <v-col>
      <v-list>
        <v-list-item-title> うさぎ </v-list-item-title>
        <draggable v-model="item3" group="item">
          <v-list-item v-for="item in item3" :key="item.id">
            {{ item.name }}
          </v-list-item>
        </draggable>
      </v-list>
    </v-col>
  </v-row>
</template>

<script>
import draggable from "vuedraggable";

export default {
  components: { draggable },
  data: () => ({
    item1: [
      { id: 1, name: "アンパン1" },
      { id: 2, name: "アンパン2" },
      { id: 3, name: "アンパン3" },
    ],
    item2: [],
    item3: [],
  }),
};
</script>

スクリーンショット 2021-12-05 10.09.05.png
今の状態

このアンパンを配る相手の分だけitemを定義しないといけない。
後々配る相手を動的に削除、追加を管理できるようにしたいと思いました。

方法

動物たちのデータをstoreで管理します。
そして動物の数(state.animals.length)だけ空の配列を用意してあげます。

index.js
export const state = () => ({
  animals: [
    { id: 1, name: "カバ" },
    { id: 2, name: "うさぎ" },
    { id: 3, name: "犬" },
  ],
  items: [],
});
// ------------------Mutations-------------------------------
export const mutations = {
  items(state) {
    const newItems = new Array();
    for (let i = 0; i < state.animals.length; i++) {
      newItems[i] = new Array();
    }
    state.items = newItems;
  },

その後、vueファイルの動物の部分を

index.vue
<v-row>
    <v-col v-for="(animal, index) in animals" :key="index">
      <v-list>
        <v-list-item-title> {{ animal.name }} </v-list-item-title>
        <draggable v-model="items[index]" group="item">
          <v-list-item v-for="item in items[index]" :key="item.id">
            {{ item.name }}
          </v-list-item>
        </draggable>
      </v-list>
    </v-col>
  </v-row>

<script>
//追加
created() {
    this.$store.commit("items");
  },
computed: {
    items() {
      return this.$store.state.items;
    },
</script>

と書き換えてあげれば、完成です!

っと言いたいところなのですが、このままでは操作した瞬間に

vuex do not mutate vuex store outside mutation handlers

とエラーが出てしまいます。
このvuedraggableを導入するにあたり、何度も苦しめられてきたエラーです。

ただ今回はあくまで配列を用意する記事ですので、
vuedraggableで連想配列を操作した時に[vuex do not mutate vuex store outside mutation handlers]となった時の話の記事で紹介しています。

おわり

不備、不明点があれば、お手数ですがコメントにてお伝え下さい。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?