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

Question

我需要 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: "Richard@gmail.com",
          img: "avatar-small.svg",
          status: "all"
        },
        { name: "Rachael", email: "Rachael@gmail.com", img: "leads.svg", status: "all" },
        { name: "Matt", email: "Matt@gmail.com", img: "user-avatar.svg",status: "all" },
        { name: "Brad", email: "Brad@gmail.com", img: "leads.svg", status: "all"},
      ],
      contactedLeads: [
        {
          name: "Jeniffer",
          email: "Jeniffer@gmail.com",
          img: "avatar-small.svg",
          status: "contacted"
        },
      ],
      convertedLeads: [
        { name: "Mike", email: "Mike@gmail.com", img: "leads.svg", 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>

Answer 1

我只需要在组件中添加数据属性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"))
    }

`

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

VueDraggable send request to DB while drag and drop

javascript

vue.js

vuedraggable