vue.js - 如何在嵌套的 v-for vuejs 中访问 id 并使用 axios 发布
问题描述
我正在开发一个带有 typeorm 后端和 vuejs js 前端的应用程序。这个应用程序的目的是通过调查设置来自客户的数据。
为此，我使用 axios 获取请求从后端获取数据，并且我想使用 axios 发布请求发布选中的复选框。我想在我的 axios 发布请求中发送大量 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>
我的 axios 获取请求的方式如下所示：
[
{
"id": 1,
"survey_title": "questionnaire TIC TAC",
"client_name": "TIC TAC",
"creation_date": "2020-03-30",
"company": {
"companyId": 1,
"company_type": "TPE",
"models": [
{
"modelId": 1,
"model_title": "Questionnaire TPE",
"topics": [
{
"topicId": 1,
"topic_title": "Sécurité des systèmes d'informations",
"topic_max_quote": 36,
"questions": [
{
"questionId": 1,
"question_title": "Avez-vous, un jour, procédé à un audit de sécurité du système d'information de votre entreprise par une entreprise externe ?",
"comments": "Des audits de sécurité permettent de détecter les éléments dangereux et les corrigés rapidement. L'audit doit être fait par une entreprise externe pour être avoir un résultat le plus neutre possible.",
"answers": [
{
"answerId": 1,
"answer_title": "Inconnu",
"answer_quote": 0,
"selected": 0
},
{
"answerId": 2,
"answer_title": "Non",
"answer_quote": 1,
"selected": 0
},
{
"answerId": 3,
"answer_title": "Une fois",
"answer_quote": 2,
"selected": 0
},
{
"answerId": 4,
"answer_title": "Récemment",
"answer_quote": 3,
"selected": 0
},
{
"answerId": 5,
"answer_title": "Régulièrement",
"answer_quote": 5,
"selected": 0
}
]
},
{
"questionId": 2,
"question_title": "Avez-vous procédé à un inventaire des OS & logiciels, installés sur le matériel fixe et portable de l'entreprise ?",
"comments": "Connaître les programmes installés sur les ordinateurs et machines permet de limiter l'installation de nouveaux programmes et l'oublie de renouvellement de licences.",
"answers": [
{
"answerId": 1,
"answer_title": "Inconnu",
"answer_quote": 0,
"selected": 0
},
{
"answerId": 2,
"answer_title": "Non",
"answer_quote": 1,
"selected": 0
},
{
"answerId": 5,
"answer_title": "Régulièrement",
"answer_quote": 5,
"selected": 0
},
{
"answerId": 6,
"answer_title": "Occasionnellement",
"answer_quote": 3,
"selected": 0
},
{
"answerId": 11,
"answer_title": "Peu",
"answer_quote": 2,
"selected": 0
}
]
},
]
},
{
"topicId": 2,
"topic_title": "Sécurité du réseau",
"topic_max_quote": 16,
"questions": [
{
"questionId": 10,
"question_title": "Présence d'un pare-feu ?",
"comments": "Un pare-feu est un outil indispensable pour la sécurité de votre réseau. L'essentiel des menaces peut être bloqué grâce à cet outil performant. Il doit néanmoins être bien configuré pour être efficace.",
"answers": [
{
"answerId": 1,
"answer_title": "Inconnu",
"answer_quote": 0,
"selected": 0
},
{
"answerId": 2,
"answer_title": "Non",
"answer_quote": 1,
"selected": 0
},
{
"answerId": 18,
"answer_title": "Oui mais il n'est pas mis à jour",
"answer_quote": 2,
"selected": 0
},
{
"answerId": 19,
"answer_title": "Oui mis à jour régulièrement",
"answer_quote": 3,
"selected": 0
}
]
},
{
"questionId": 11,
"question_title": "Les appareils importants sont-ils reliés à un onduleur ?",
"comments": "Les onduleurs permettent de gérer les coupures de courant et des orages. Ils assurent les fonctionnalités des appareils reliés.",
"answers": [
{
"answerId": 1,
"answer_title": "Inconnu",
"answer_quote": 0,
"selected": 0
},
{
"answerId": 2,
"answer_title": "Non",
"answer_quote": 1,
"selected": 0
},
{
"answerId": 20,
"answer_title": "En partie",
"answer_quote": 2,
"selected": 0
},
{
"answerId": 21,
"answer_title": "Oui",
"answer_quote": 3,
"selected": 0
}
]
},
]
}
]
}
]
}
}
]
谢谢
解决方案
您需要在内部循环中以不同的方式命名变量。目前，您在每个循环中将它们命名为 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 之上的所有属性
推荐阅读
- php - ajax，语法错误：位置 0 的 json 中的意外标记 A
- java - 我无法让我的原色与屏幕上的按钮相匹配，即使它们在 Android Studio 中是相同的 HEX 颜色
- python - 是否有任何 python 代码可以在不使用 ImageMagick 或 Ghost 脚本的情况下将多页 pdf 转换为图像
- angular - 无法使用 Karma 和 Jasmine 测试 Angular http 拦截器
- scala - 连接以形成列表 scala
- c++ - LNK2019 使用带有静态链接的静态成员
- ffmpeg - 如何对存储库中的所有视频应用 ffmpeg 命令？
- scala - 如何根据一组列值更新 Spark Dataframe 中的列？
- node.js - 托管一个简单的节点 API
- php - 如何在 php 中通过 jQuery Ajax 在数据库中插入数据