Как получить значение из ввода и отправить его как объект json на бэкэнд в vue 3

У меня есть анкета, которая показывает вопросы и ответы на них с помощью vuejs. django будет работать с бэкендом. Я хочу получить идентификатор вопроса и ответа из анкеты и отправить их в backend как json объект.

вот мой компонент вопроса:

<template>
<div>
    <div v-for="section in sections.slice(sectionStart, sectionEnd)" :key="section.id">
        <div v-for="question in section.questions" :key="question.id">
           <!-- Single Choice -->
            <div v-show="question.type === 'Single Choice'" :id="question.id">
                <p class="py-4 font-medium leading-8">{{ question.question_text }}</p>
                <input type="hidden" :value="question.question_text" v-model="question.id">
                <div class="flex py-1" v-for="choice in question.choices" :key="choice.id">
                    <input class="h-5 w-5" type="radio" :name="question.id" v-model="choice.id" :id="choice.id"/>
                    <label class="ml-3" :for="choice.id">{{ choice.text }}</label>
                </div>
            </div>

            <!-- Multiple choice -->
            <div v-show="question.type === 'Multiple Choice'" :id="question.id">
                <p class="py-4 font-medium leading-8">{{ question.question_text }}</p>
                <div class="flex py-1" v-for="choice in question.choices" :key="choice.id">
                    <input type="checkbox" class="h-6 w-6" :name="choice.id" :id="choice.id">
                    <label :for="choice.id" class="ml-3">{{ choice.text }}</label>
                </div>
            </div>
        </div>
    </div>
    
</div>
</template>

<script>
export default {
    data() {
        return {
            sections: data.sections,  
        }
    },
    props:[
        'sectionStart',
        'sectionEnd'
    ]
};
</script>

Как я могу получить id вопроса и его ответ и сохранить эти значения в json объект, а затем отправить его в backend?

Сначала вам нужно настроить ваши v-model. В настоящее время вы ссылаетесь на такие вещи, как v-model="choice.id", которые не существуют в ваших свойствах данных. Структура вашего v-model зависит от того, как вы хотите передавать данные.

В качестве примера можно передать его так, как вы уже пробовали, с помощью v-model. Но вместо v-model="choice.id" мы используем v-model="userAnswers[section.id][question.id][choice.id]" после создания его в наших свойствах данных:

data() {
        return {
            sections: data.sections,
            userAnswers: {}
        }
    }

Таким образом, использование userAnswers[section.id][question.id][choice.id] приведет к созданию чего-то вроде этого:

{
  0: { // First section
    0: { // First question
      0: false, // Choices with true or false 
      1: true,
      2: false,
      3: false
    }
  },
  1: {
    ...
  }
}

EDIT: Использование с предоставленной структурой

Итак, вы предоставили следующую структуру:

responses: {
   question_id: response_id,
}

Это возможно только для вопросов с одним ответом и только если каждый ответ имеет уникальный id вне своего раздела. Если первый вопрос раздела всегда имеет 0 в качестве своего id, то это не сработает. Но если это так, то это просто следующее: userAnswers[question.id] в качестве v-model радиокнопок, в то время как они должны предоставлять response_id в качестве своих значений.

Вернуться на верх