在 Vuejs 中检索一个 props 数据并记录到 POST API with modal

Question

我想在单击“添加研究”按钮时检索数据“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 以发送它？感谢您的帮助

Answer 1

您应该确定当前 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
      // ...
    }

在 Vuejs 中检索一个 props 数据并记录到 POST API with modal

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

javascript

vue.js

api-platform.com