Обновить состояние после прохождения: переместить реквизит - PullRequest
Новая
       60

Обновить состояние после прохождения: переместить реквизит

1 голос
/ 11 апреля 2019

В моем проекте я использую модуль vuedraggable для перетаскивания и модуля vuex-persistedstate.Он имеет 4 колонки с карточками и карты можно перетаскивать между колонками.Когда я добавляю или удаляю карту (карты), они добавляются / удаляются из магазина vuex, а также из локального хранилища.Но когда я перемещаю карту между столбцами, они меняются только в пользовательском интерфейсе - не меняйте vuex и localStorage.Что я сделал не так?

Я создал тест на шутку, и он прошел.Но когда я попытался изменить состояние с помощью: переместить реквизиты из vuedraggable документации, я получил ошибку Uncaught TypeError: Неверная попытка распространить не повторяемый экземпляр 

    <template lang="pug">
    .cards
        Draggable(:list="card" class="drag-area" :group="{name: 'card'}"
                  :move="checkMove")
            .cards__wrapper(v-for="(item,i) in card" :key="i")
              .cards__wrapper_remove(@click="closeCard(i, index)")
              span.cards__wrapper_id id: {{ item.id }}
              span.cards__wrapper_content {{ item.content }}
</template>

<script>
import Draggable from "vuedraggable";
import { mapActions, mapGetters } from "vuex";
export default {
  methods: {
    ...mapActions(["removeCard", "removeDraggableCard"]),
    closeCard(innerIndex, index) {
      this.removeCard({ index, innerIndex });
    },
    checkMove() {
      let updatedHold = this.hold;
      let updatedProgress = this.progress;
      let updatedReview = this.review;
      let updatedApproved = this.approved;
      this.removeDraggableCard({updatedHold,
        updatedProgress,
        updatedReview,
        updatedApproved});
    }
  },
  computed: {
    ...mapGetters({
      hold: "getHold",
      progress: "getProgress",
      review: "getReview",
      approved: "getApproved"
    }),
    cardsArray() {
      let resultArr;
      switch (this.index) {
        case 1:
          resultArr = this.hold;
          break;
        case 2:
          resultArr = this.progress;
          break;
        case 3:
          resultArr = this.review;
          break;
        case 4:
          resultArr = this.approved;
          break;
      }
      return resultArr;
    }
  },
  components: {
    Draggable
  },
  props: {
    index: {
      type: Number,
      required: true,
      default: 0
    },
    card: {
      type: Array,
      default: function() {
        return [];
      }
    }
  }
};
</script>

Чего я ожидал?Когда карта перемещается из одного столбца в другой, массивы в хранилище обновляются, а также обновляется localStorage.

...