Corinne RUSSO
Reputation: 9
How to access id in nested v-for vuejs and post with axios
I am developping an app with a backend in typeorm and a frontend with vuejs js. The purpose of this app is to set datas from customers thanks to a survey.
To do this I get datas from my backend with an axios get request, and I want to post the checked checkboxes with an axios post request. I want to send plenty of ids in my axios post request, but I can't manage to get them/ I wrote some comments in my code, I hope it will help to understand my question.
<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>
This how my axios get request looks like:
[
{
"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
}
]
},
]
}
]
}
]
}
}
]
Thank you
Upvotes: 0
Views: 193
Answers (1)
Rijad Husic
Reputation: 327
You need to name your variables differently in the inner loops. Currently, you are naming those as currentSurvey in each loop instead name them to something like this
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"
this way you can access all those properties above currentSurvey, surveyModel, surveyTopic, surveyQuestion
Upvotes: 1
Related Questions
- How to GET the item just created by the POST
- Vuejs- Get Object ID after POST Request In Current Page
- VueJS and axios - how to access data in a post request
- How to pass id into Vue instance
- Vue JS: Sending an axios post data from an object
- How to get the latest ID with Vuex and Axios post request
- Get data by id using Axios and VueJS
- Axios Vuejs POST request with parameter
- VueJs post with Axios. err var is not defined
- Axios POST request not working when passed object