Vue.js 如何使用axios访问嵌套v-for vuejs和post中的id

我正在开发一个应用程序，后端是typeorm，前端是vuejs。此应用程序的目的是通过调查从客户处设置数据

为此，我使用axios get请求从后端获取数据，并使用axios post请求发布复选框。 我想在我的axios post请求中发送大量ID，但我无法获得它们/我在代码中写了一些注释，我希望这将有助于理解我的问题

<template>
  <div>
    <p>Nom du questionnaire : {{ currentSurveys.survey_title }}</p>
    <p>Type d'entreprise : {{ currentSurveys.company.company_type }}</p>

    <div>
      <!-- 1rst loop to get the datas -->
      <div v-for="(currentSurvey, index) in currentSurveys" v-bind:key="index">
        <v-row align="center">
          <v-expansion-panels :popout="popout" :tile="tile">
            <!-- 2nd loop to get the company model -->
            <v-expansion-panel
              v-for="(currentSurvey, index) in currentSurvey.models"
              v-bind:key="index"
            >
              <!-- 3rd loop to get the topics -->
              <v-expansion-panel
                v-for="(currentSurvey, index) in currentSurvey.topics"
                v-bind:key="index"
              >
                <v-expansion-panel-header style="color:white">{{ currentSurvey.topic_title }}</v-expansion-panel-header>

                <!-- 4th lopp to get the questions -->
                <v-expansion-panel-content
                  v-for="(currentSurvey, index) in currentSurvey.questions"
                  v-bind:key="index"
                >
                  <div class="survey_questions">
                    <p>
                      {{ currentSurvey.questionId }} -
                      {{ currentSurvey.question_title }}
                    </p>
                    <p>{{ currentSurvey.comments }}</p>
                    <!-- 5th loop the get the answers as checkboxes-->
                    <!--I want to use the postAnswers() functions when the checkbox is cliked and send the following datas : surveyId, modelId, topicId, questionId-->
                    <!-- I get answerId  with "isPicked" function-->
                    <div v-for="(currentSurvey, index) in currentSurvey.answers" :key="index">
                      <input
                        type="checkbox"
                        :value="currentSurvey.answerId"
                        @input="isPicked"
                        @change="postAnswer()"
                      />
                      <label>{{ currentSurvey.answerId }}</label>
                      <!-- <label>quote : {{ currentSurvey.answer_quote }}</label> -->
                      <label>{{ currentSurvey.answer_title }}</label>
                    </div>
                  </div>
                </v-expansion-panel-content>
              </v-expansion-panel>
            </v-expansion-panel>
          </v-expansion-panels>
        </v-row>
      </div>
      <div>
        <button class="survey_submit_button">Soumettre</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "MySurvey",

  data: () => ({
    popout: true,
    tile: true,

    currentSurveys: [],
    picked: ""
  }),


  mounted() {
    axios
      .get(`http://localhost:3005/surveys/` + this.$route.params.id) //voir le fichier surveydata.json
      .then(response => {
        this.currentSurveys = response.data;
      })
      .catch(e => {
        console.log(e);
      });
  },

  //Where I need help//
  methods: {
    postAnswer() {
      axios
        .post(`http://localhost:3005/submit`, {
          answerId: this.picked, 
          surveyId: this.currentSurveys.id 
          // modelId:??
          // topicId:??
          // questionId:??

        })
        .then(function(data) {
          console.log(data);
        });
    },


    isPicked: function($event) {
      this.picked = parseInt($event.target.value);
    }
  }
};
</script>

---

谢谢

您需要在内部循环中以不同的方式命名变量。 目前，在每个循环中，您都将它们命名为currentSurvey，而不是将它们命名为以下名称

v-for="(currentSurvey, index) in currentSurveys"

v-for="(surveyModel, index) in currentSurvey.models"

v-for="(surveyTopic, index) in surveyModel.topics"

v-for="(surveyQuestion, index) in surveyTopic.questions"

v-for="(surveyAnswer, index) in surveyQuestion.answers"

---

通过这种方式，您可以访问currentSurvey、surveyModel、surveyTopic、surveyQuestion上面的所有属性，谢谢！我按照你说的更改了变量名。但是现在你能精确地知道我如何在我的post-axios请求中设置topicId、questionId和modelId吗？很抱歉，我是一个非常新的开发人员，您只需将参数（topicd、questionId、modelId）传递给您的函数，如postAnswer（surveyTopic.topicd、surveyQuestion.questionId、surveyModel.modelId）。在方法中，只需将这些参数添加到函数中并使用它们

v-for="(currentSurvey, index) in currentSurveys"

v-for="(surveyModel, index) in currentSurvey.models"

v-for="(surveyTopic, index) in surveyModel.topics"

v-for="(surveyQuestion, index) in surveyTopic.questions"

v-for="(surveyAnswer, index) in surveyQuestion.answers"