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

【问题标题】：VueDraggable send request to DB while drag and dropVueDraggable 在拖放时向数据库发送请求
【发布时间】：2021-04-21 06:00:08
【问题描述】：

我需要 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>

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;

【问题讨论】：

好吧，你有 handleChange 处理程序 - 在其中进行 AJAX 调用。
@IVOGELOV 我有一个 AJAX 请求，例如 http:domainname/api/leads/lead_id/status_id 但我无法处理。我需要 status_id 例如 Mike 在已转换列中，当将 Mike 从已转换到已联系拖放时转换列 status_id=1 我需要获取已联系列的 status_id 但不知道如何
@IVOGELOV 我的 handleChange 函数在控制台中返回两个名为（添加、删除）的对象，两者都只返回我的道具电子邮件：“Jeniffer@gmail.com”img：“avatar-small.svg”名称： “Jeniffer”状态：“已联系”

标签： javascript vue.js vuedraggable

【解决方案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"))
    }

【讨论】：