VueDraggable 在拖放时向数据库发送请求

问题描述

我需要 vuedraggable 组件的帮助。我有三列。 （插入照片）我想在列之间拖动 BoardUserCard 并想向数据库发送 PUT 请求以更改与删除的列相关的“lead_status_id”。我怎样才能做到这一点？我在文档中找不到任何关于 api 的示例。

<template>
  <div class="board">
    <div class="boards">
      <div class="boards-cards leads">
        <div class="board-card-header ">
          <h3>
            Leads
          </h3>
          <span>
            {{ allLeads.length }}
          </span>
        </div>
        <draggable
          ghost-class="ghost"
          :list="allLeads"
          class="board-card-body"
          :options = "{group:allLeads}"
          group="leads"
          @change="handleChange"
        >
          <BoardUserCard
            v-for="item in allLeads"
            :key="item.name"
            :name="item.name"
            :email="item.email"
            :img="item.img"
            :status="item.status"
          />
        </draggable>
      </div>
      <div class="boards-cards contacted">
        <div class="board-card-header ">
          <h3>
            Contacted
          </h3>
          <span>
            {{ contactedLeads.length }}
          </span>
        </div>
        <draggable
          ghost-class="ghost"
          :list="contactedLeads"
          class="board-card-body"
          :options = "{group:contactedLeads}"
          group="leads"
          @change="handleChange"
        >
          <BoardUserCard
            v-for="item in contactedLeads"
            :key="item.name"
            :name="item.name"
            :email="item.email"
            :img="item.img"
            :status="item.status"
          />
        </draggable>
      </div>
      <div class="boards-cards converted">
        <div class="board-card-header ">
          <h3>
            Converted
          </h3>
          <span>
            {{ convertedLeads.length }}
          </span>
        </div>
        <draggable
          ghost-class="ghost"
          :list="convertedLeads"
          class="board-card-body"
          :options = "{group:convertedLeads}"
          group="leads"
          @change="handleChange"
        >
          <BoardUserCard
            v-for="item in convertedLeads"
            :key="item.name"
            :name="item.name"
            :email="item.email"
            :img="item.img"
            :status="item.status"
          />
        </draggable>
      </div>
    </div>



  </div>
</template>

<script>
import BoardUserCard from "@/components/BoardUserCard.vue";
import draggable from "vuedraggable";

export default {
  name: "Dashboard",components: {
    BoardUserCard,draggable,},data() {
    return {
      showModal: false,allLeads: [
        {
          name: "Richard",email: "[e-mail]",img: "avatar-small.svg",status: "all"
        },{ name: "Rachael",email: "[e-mail]",img: "leads.svg",status: "all" },{ name: "Matt",email: "[e-mail]",img: "user-avatar.svg",{ name: "Brad",email: "[e-mail]",status: "all"},],contactedLeads: [
        {
          name: "Jeniffer",email: "[e-mail]",status: "contacted"
        },convertedLeads: [
        { name: "Mike",email: "[e-mail]",status: "converted" },};
  },methods: {
    openModal() {
      this.showModal = true;
    },closeModal() {
      this.showModal = false;
    },handleChange(event){
      console.log(event)
    }
  },};
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

解决方法

我需要在组件data-id="4"中添加数据属性

     <draggable
          ghost-class="ghost"
          :list="convertedLeads"
          class="board-card-body"
          :options = "{group:convertedLeads}"
          group="leads"
          @end="handleChange"  
          data-id="4"     
        >

And access data-id attribute in handleChange function 

    handleChange(event){
      console.log(event.from.getAttribute("data-id"))
      console.log(event.to.getAttribute("data-id"))
    }

`