在Vuejs中检索道具数据并使用模态记录到POST API

如何解决在Vuejs中检索道具数据并使用模态记录到POST API

当我点击“添加研究”按钮时，我想检索数据“project.id”以记录它。当我点击这个按钮时，我会发送名称和状态，但我也想通过我的 API 发送项目的 ID。 Si这是代码：

<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>

还有 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);

    }

  }


}

如何在我的 axios 行中添加我的项目 ID 以发送它？ 感谢您的帮助

解决方法

您应该使用 project.id 范围内的容器来确定当前的 data，用于添加研究处理程序 sendClick()，并将 project.id 传递给 showModalStudy() 以覆盖定义的下一次 API 调用的数据 currentId

    <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
      // ...
    }