Retrieve a props data in Vuejs and record to POST API with modal

I would like to retrieve the data “project.id” to record it when I click on the button “add study”. When I click on this button, I send the name and the status but i would like to send the id of project too via my API. Si this is the code :

<template>
  <div>

      <div v-for="(projet,index) in arrayProjects.projects" v-bind:key="index" class="box-project">

        <h2>{{projet.title}} - {{projet.nameStructure}}</h2>

        <ProjectTable v-bind:id-project="projet.id" />

        <div>
          <a-button type="secondary" @click="showModalStudy">
            Add study {{projet.id}}
          </a-button>
        </div>
        <a-modal
          title="Add study :"
          :visible="visible"
          :confirm-loading="confirmLoading"
          @cancel="cancelClick"
          @ok="sendClick"
        >
          <div>
            <a-form>
              <a-form-item >
                <a-input
                  v-model="newStudy.nameStudy"
                />
              </a-form-item>
            </a-form>
          </div>
        </a-modal>
      </div>
  </div>
</template>

And the javascript :

import ProjectTable from "@/components/ProjectTable";
import axios from "axios";

export default {

  name: "ProjectCard",
  components: {ProjectTable},
  props: ["arrayProjects"],
  data() {
    return {
      visible:false,
      confirmLoading: false,
      newStudy: {
        nameStudy:"",
      }
    }
  },
  methods: {


    showModalStudy() {
      this.visible = true;
    },

    cancelClick() {
      this.visible= false;
      console.log("click cancel")
    },

    sendClick() {
      console.log("send")
      console.log(this.newStudy.nameStudy)
      this.confirmLoading = true;
      axios
        .post('http://127.0.0.1:8000/api/studies', {
          name : this.newStudy.nameStudy,
          status: "On load",

        })

      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 1000);

    }

  }


}

How can I add my id of my project in my axios lines to send it ? Thanks for your help

Answer

You should determine the current project.id with a container in data scope for the Add study handler sendClick() with passing project.id to showModalStudy() to overwrite the defined data currentId for the next API call

    <a-button type="secondary" @click="showModalStudy(project.id)">
      Add study {{ projet.id }}
    </a-button>

  data() {
    return {
      currentId = null // will be a id value when user click the button
      ...
    };
  },

    showModalStudy(projectId) {
      this.visible = true;
      this.currentId = projectId
    },

    sendClick() {
      // do something with this.currentId
      // ...
    }

Advertisement

Answer