Vue.js - Iterating through data objects on button click

Question

I am trying to create a quiz using vue.js and cannot seem to figure out how to make the "Next" button iterate through my data. The hope is for the screen to display the object containing the question with answers (i.e. questionOne, questionTwo), then show the next object when "Next" is clicked. I have several attempts in the existing code as you will see, but none work.

Quiz Component Template:

<template>
  <div class="quiz-container">
    <div
      class="question-container">
      <h1> {{ currentQuestion.q }} </h1>
    </div>
    <div class="answer-container">
      <v-btn
        v-for="answer in currentQuestion.ans"
        :key="answer"
        outlined
        block
        x-large
        class="answer-btn"
      >
      {{ answer }}
      </v-btn>
    </div>
    <div
      class="navigation flex-row"
    >
      <v-btn text x-large @click="questionNav.curr--">Back</v-btn>
      <v-spacer />
      <v-btn text x-large @click="qNext()">Next</v-btn>
    </div>
  </div>
</template>

Quiz Script:

<script>
  import { mapGetters } from 'vuex';
  export default {
    name: 'quiz',
    computed: {
      ...mapGetters('user', {
        loggedIn: 'loggedIn'
      })
    },
    data: () => ({
      curr: 0,
      currentQuestion: {
         q: 'kasjdn' ,
         ans: ['1', '2', '3']
      },
      questionOne: {
         q: 'How many minutes do you want to spend?' ,
         ans: ['Short (15-20)', 'Medium (20-40)', 'Long (40-60)']
      },
      questionTwo: {
         q: 'What muscle group do you want to focus on?' ,
         ans: ['Upper Body', 'Lower Body', 'Core', 'Full Body']
      },
      questionThree: {
         q: 'What level intensity do you want?' ,
         ans: ['Leisure Walking', 'Speed Walking', 'Jogging', 'Sprinting']
      },
      questionParts: [this.questionOne, this.questionTwo, this.questionThree]
    }),
    methods: {
      questionNav: function () {
        questionParts = [this.questionOne, this.questionTwo, this.questionThree]
        currentQuestion = questionParts[curr]
      },
      qNext: function () {
        this.currentQuestion = this.questionParts[this.curr++]
      }
    }
  }
</script>

As you can see, I have tried a "qNext" method and a "questionNav" method, but neither work. Again, I would like for the "Next" to iterate through [questionOne, questionTwo, questionThree]. I am relatively new to vue, so any help would be greatly appreciated. Thank you!

I suspect it has something to do with you referring your main objects properties using 'this' inside of a function. 'this' is context specific so in your methods, it will be the method object not your main method — Glynn Hurrell
– Glynn Hurrell, Commented May 2, 2020 at 1:18
@GlynnHurrell I initially had them without "this", but that didn't work either — A.Lo.01
– A.Lo.01, Commented May 2, 2020 at 1:23
without using this, they would be local properties. Have you tried passing 'this' into the functions constructor so qNext: function(obj) { obj.currentQuestion = obj.questionParts[obj.curr++] } and then calling qNext(this) — Glynn Hurrell
– Glynn Hurrell, Commented May 2, 2020 at 1:31

paulgv · Accepted Answer · 2020-05-02 01:41:13Z

The problem with the current implementation is that you're trying to populate questionParts in a context where questionOne, questionTwo and questionThree aren't accessible, meaning that your questions array will be filled with undefined values.

Overall, what you've done should work as long as you make sure questionParts does contain the question objects. If you want to keep that logic in the data method, here's how you could go about it:

data: () => {
  const questionOne = {
    q: 'How many minutes do you want to spend?' ,
    ans: ['Short (15-20)', 'Medium (20-40)', 'Long (40-60)']
  };
  const questionTwo = {
    q: 'What muscle group do you want to focus on?' ,
    ans: ['Upper Body', 'Lower Body', 'Core', 'Full Body']
  };
  const questionThree = {
    q: 'What level intensity do you want?' ,
    ans: ['Leisure Walking', 'Speed Walking', 'Jogging', 'Sprinting']
  };
  const questionParts = [questionOne, questionTwo, questionThree]
  return {
    curr: 0,
    currentQuestion: {
      q: 'kasjdn' ,
      ans: ['1', '2', '3']
    },
    questionOne,
    questionTwo,
    questionThree,
    questionParts,
  }
},

By declaring a few variables before actually return data()'s value, you're able to properly populate the questionParts array. This should be sufficient to get your quiz to work.

There are a few other improvements that you might want to consider, for example:

Instead of declaring questionOne, questionTwo and questionThree objects, you could instantiate an array of questions directly. Given the code example you provided, it doesn't seem especially useful to have each question as a distinct object.
currentQuestion could be a computed property that returns the question at index curr. You would then be able to only increment or decrement curr in the click handlers, and the computed property would take care of returning the correct question without you needing to explicitly assign currentQuestion.

Thank you so much for the solution and also the great optimization advice!

jcoleau · Accepted Answer · 2020-05-02 01:02:12Z

0

qNext: function () {
        this.currentQuestion.q = this.questionParts[this.curr++].q
        this.currentQuestion.ans = this.questionParts[this.curr++].ans
      }

answered May 2, 2020 at 1:02

jcoleau

1,20010 silver badges20 bronze badges

Collectives™ on Stack Overflow

Vue.js - Iterating through data objects on button click

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related