Help needed with the vuedraggable component. I have three columns (photo attached) and I would like to be able to drag BoardUserCard between the columns. Upon dropping the card, I want to send a PUT request to the database to change the "lead_status_id" associated with the column it was dropped in. How can I accomplish this? I couldn't find any examples about APIs in the documentation. https://i.sstatic.net/sneeT.png
<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: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6b48f858e879482a6818b878f8ac885898b">[email protected]</a>",
img: "avatar-small.svg",
status: "all"
},
{ name: "Rachael", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="782a191b10191d14381f15191114561b1715">[email protected]</a>", img: "leads.svg", status: "all" },
{ name: "Matt", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="521f33262612353f333b3e7c313d3f">[email protected]</a>", img: "user-avatar.svg",status: "all" },
{ name: "Brad", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4a6968580a48389858d88ca878b89">[email protected]</a>", img: "leads.svg", status: "all"},
],
contactedLeads: [
{
name: "Jeniffer",
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1ab848f8887878493a1868c80888dcf828e8c">[email protected]</a>",
img: "avatar-small.svg",
status: "contacted"
},
],
convertedLeads: [
{ name: "Mike", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="45082c2e20052228242c296b262a28">[email protected]</a>", 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>