<script>
import _ from "lodash";
export default {
name: "QuestionBottom",
props: {
currentQuestion: Object,
nextQuestion: Function,
increment: Function,
},
data() {
return {
selectedIndex: null,
correctIndex: null,
shuffleArray: [],
ansArray: [],
};
},
// watch listens for changes to the props
watch: {
currentQuestion() {
this.selectedIndex = null;
},
// Running allOptions method from the first time props are passed
allOptions() {
console.log("I am second");
console.log("what's in this.allOptions", this.allOptions);
this.correctIndex = this.allOptions.indexOf(
this.currentQuestion.correct_answer
);
console.log("Correct index isss", this.correctIndex);
},
},
computed: {
allOptions() {
let allOptions = [
...this.currentQuestion.incorrect_answers,
this.currentQuestion.correct_answer,
];
// console.log("array that is not shuffled is ", allOptions);
allOptions = _.shuffle(allOptions);
console.log("shuffled array is", allOptions);
// console.log("Corect ans is ", this.currentQuestion.correct_answer);
console.log("I am first");
return allOptions;
},
},
methods: {
selectedAns(index) {
this.selectedIndex = index;
console.log("Selected answer index", this.selectedIndex);
},
submitAnswer() {
let isCorrect = false;
if (this.selectedIndex === this.correctIndex) {
isCorrect = true;
}
this.increment(isCorrect);
},
},
};
</script>
I would like the watch section's allOptions() method to be executed when the component first receives props. While I understand that the watch feature triggers based on changes in methods or props, is there a way to ensure this method runs as soon as props are initially provided to the component?