Bug: App crashes when updating the questions

[gamcoh]

Describe the bug
I'm trying to programmatically update the questions.
For instance if the user answers a questions wrong, I'm removing all the other related questions like so:

this.questions = this.questions.filter(q => q.theme !== some_theme)

But then the app turns all white (it crashes like that).

Here are some questions

new QuestionModel({
	id: "quiz_" + uuid.v4(),
	type: QuestionType.MultipleChoice,
	required: true,
	multiple: true,
	helpTextShow: false,
	exercise: "beginner/01_ReadWriteData",
	title: "How would you read a CSV (Comma Sperated Value) file named \"file.csv\", and store it into a variable called `df`?",
	options: [
		new ChoiceOption({
			label: "`pd.read_csv(\"file.csv\", var=df)`",
			value: "`pd.read_csv(\"file.csv\", var=df)`"
		}),
		new ChoiceOption({
			label: "`df = pd.read_excel(\"file.csv\")`",
			value: "`df = pd.read_excel(\"file.csv\")`"
		}),
		new ChoiceOption({
			label: "`df = pd.readCsv(file)`",
			value: "`df = pd.readCsv(file)`"
		}),
		new ChoiceOption({
			label: "`df = pd.read_csv(\"file.csv\")`",
			value: "`df = pd.read_csv(\"file.csv\")`"
		}),
		new ChoiceOption({
			label: "I'm not sure",
			value: "I'm not sure"
		}),
	],
	correct_answer: ["`df = pd.read_csv(\"file.csv\")`"]
}),
new QuestionModel({
	id: "quiz_" + uuid.v4(),
	type: QuestionType.MultipleChoice,
	required: true,
	multiple: true,
	helpTextShow: false,
	exercise: "beginner/01_ReadWriteData",
	title: "How would you read a XLSX file named \"file.xlsx\" while parsing the \"dates\" column",
	options: [
		new ChoiceOption({
			label: "`pd.read_xlsx(\"file.xlsx\")`",
			value: "`pd.read_xlsx(\"file.xlsx\")`"
		}),
		new ChoiceOption({
			label: "`pd.read_xlsx(\"file.xlsx\", parse_dates=[\"dates\"])`",
			value: "`pd.read_xlsx(\"file.xlsx\", parse_dates=[\"dates\"])`"
		}),
		new ChoiceOption({
			label: "`pd.read_excel(\"file.xlsx\", parse_dates=[\"dates\"])`",
			value: "`pd.read_excel(\"file.xlsx\", parse_dates=[\"dates\"])`"
		}),
		new ChoiceOption({
			label: "`pd.read_excel(\"file.xlsx\", parse_dates)`",
			value: "`pd.read_excel(\"file.xlsx\", parse_dates)`"
		}),
		new ChoiceOption({
			label: "I'm not sure",
			value: "I'm not sure"
		}),
	],
	correct_answer: ["`pd.read_excel(\"file.xlsx\", parse_dates=[\"dates\"])`"]
}),

Here's the triggered code for updating the questions

<flow-form
      ref="flowform"
      v-on:complete="onComplete"
      v-on:submit="onSubmit"
      v-on:answer="questionAnswered"
      v-bind:questions="questions"
      v-bind:language="language"
      v-bind:standalone="true">

....

computed: {
    questions () {
        return [
             // the questions
        ].filter(q => this.blacklisted_exercise.includes(q.exercise) === false)
    }
}

....

questionAnswered (question) {
	// If the answer is incorrect, we'll remove the other questions about this exercise
	this.blacklisted_exercise.push(question.exercise)
},

[spinn]

Hi @gamcoh,

in the example you gave you'd actually remove all questions (since all have the same exercise value) but I'm guessing your real app has multiple different values. The problem is you're also removing the current question so Vue Flow Form doesn't know what to display (since it's internal pointer is still pointing to the non-existing question). You'd probably need to remove all questions after the current one to make this work.

[gamcoh]

@spinn you're probably right, thanks!