通过后更新状态:移动道具

时间:2019-04-11 19:40:01

标签: vuejs2 local-storage vuex vuedraggable

在我的项目中,我将vuedraggable模块用于拖放和vuex-persistedstate模块。 它有4个带有卡片的列,卡片可以在列之间拖动。 当我添加或删除卡时,它们已从vuex存储以及从localStorage添加/删除。 但是,当我在列之间移动卡时,它们只会在UI上发生变化-不会更改vuex和localStorage。 我做错了什么?

我创建了一个笑话测试,它通过了。 但是,当我尝试使用vuedraggable文档中的:move props更改状态时,出现了错误 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也将更新。

0 个答案:

没有答案