fix: Lors de la selection d'une image le bouton radio doit changer

This commit is contained in:
Simon 2022-04-06 14:29:04 +02:00
parent 93f2c7cc35
commit 552866204f
3 changed files with 16 additions and 10 deletions

View File

@ -46,7 +46,7 @@ steps:
commands: commands:
- npm i - npm i
- npm run fetchData - npm run fetchData
# - npm run lint - npm run lint
- npm run build - npm run build
- name: push docker image on registry - name: push docker image on registry
@ -87,7 +87,7 @@ steps:
commands: commands:
- npm i - npm i
- npm run fetchData - npm run fetchData
# - npm run lint - npm run lint
- npm run build - npm run build
- name: push docker image on registry - name: push docker image on registry

View File

@ -9,13 +9,10 @@ const props = defineProps({
required: true, required: true,
}, },
}); });
defineEmits(["answerSelected"]); const emits = defineEmits(["answerSelected", "nextQuestion"]);
const slides = ref(); const slides = ref();
if (props.question.weight == null) {
props.question.weight = props.question.answers[0].weight;
}
const answerWeight = ref(props.question.weight); const answerWeight = ref(props.question.weight);
function selectAnswer(answer) { function selectAnswer(answer) {
@ -26,7 +23,8 @@ function selectAnswer(answer) {
} }
function slideMove(splide, newIndex) { function slideMove(splide, newIndex) {
props.question.weight = props.question.answers[newIndex].weight; answerWeight.value = props.question.answers[newIndex].weight;
emits("answerSelected", props.question, answerWeight);
} }
</script> </script>
@ -43,7 +41,8 @@ function slideMove(splide, newIndex) {
:name="`question_${question.id}`" :name="`question_${question.id}`"
:value="answer.weight" :value="answer.weight"
v-model="answerWeight" v-model="answerWeight"
@click="selectAnswer(answer)" @change="selectAnswer(answer)"
@click="nextQuestion"
/> />
{{ answer.title }} {{ answer.title }}
</label> </label>
@ -61,7 +60,7 @@ function slideMove(splide, newIndex) {
<SplideSlide <SplideSlide
v-for="answer in question.answers" v-for="answer in question.answers"
:key="answer.id" :key="answer.id"
@click="$emit('answerSelected', question, answerWeight)" @click="$emit('nextQuestion')"
> >
<img height="200" :src="`/answers/${answer.image}.webp`" /> <img height="200" :src="`/answers/${answer.image}.webp`" />
</SplideSlide> </SplideSlide>

View File

@ -104,6 +104,9 @@ function goQuestionSlide(question) {
} }
function answerSelected(question, answerWeight) { function answerSelected(question, answerWeight) {
questions.value.find((q) => q.id === question.id).weight = answerWeight; questions.value.find((q) => q.id === question.id).weight = answerWeight;
}
function nextQuestion() {
setTimeout(() => slides.value.go(">"), 100); setTimeout(() => slides.value.go(">"), 100);
} }
</script> </script>
@ -125,7 +128,11 @@ function answerSelected(question, answerWeight) {
}" }"
> >
<SplideSlide v-for="question in questions" :key="question.id"> <SplideSlide v-for="question in questions" :key="question.id">
<Question :question="question" @answerSelected="answerSelected" /> <Question
:question="question"
@answerSelected="answerSelected"
@nextQuestion="nextQuestion"
/>
</SplideSlide> </SplideSlide>
<SplideSlide class="latest"> <SplideSlide class="latest">
<template v-if="displayScoreResult && result"> <template v-if="displayScoreResult && result">