Resolved: I need assistance in determining why a data property won't navigate with a router.push

In this post, we will see how to resolve I need assistance in determining why a data property won’t navigate with a router.push

Question:

I am writing a Vue.js project for this online course, and I am having a hard time moving some user input data from one component to another. We start in the MathFactsView.vue page, where a user selects an operation, hits the play button, and is navigated to a game screen called MFConfig.vue. When the game starts, an equation should display at the top of the screen and a player should attempt to answer, for each correct question, the score increases by 1 and a new equation is generated.
The problem is when a player selects an operation and presses start, I can see via console.log that the data is grabbed. However, on the game screen, no equation is generated on game start. This is because the operation is labeled as undefined. This tells me that the operation data property is not receiving information via routing from the starting page. I can’t seem to find a working solution for this. I have pasted the code for both pages, and below that I will list what I’ve tried.
MATHFACTSVIEW.vue

<template>
  <div class="container">
    <div class="card mx-auto mt-5">
      <div class="card-header">
        <h1 class="text-center">Math Facts</h1>
      </div>
      <div class="card-body">
        <div class="form-group">
          <label for="operation-select">Select operation:</label>
          <select class="form-control" id="operation-select" v-model="selectedOperation">
            <option value="addition">Addition</option>
            <option value="subtraction">Subtraction</option>
            <option value="division">Division</option>
            <option value="multiplication">Multiplication</option>
          </select>
        </div>
        <div class="text-center">
          <p>Select the operation you want to try.</p>
          <p>Once you press play, you will have 60 seconds to answer as many problems as you can either using your own keyboard, or using the on screen number pad.</p>
          <p>When the game ends, you will see your score, plus have the ability to play again with the same operation, or be taken back to the game screen to choose a new operation.</p>
          <button class="btn btn-primary" @click.prevent="startGame">Play</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOperation: ''
    };
  },
  methods: {
    startGame() {
      console.log("Selected operation:", this.selectedOperation);
      this.$router.push({ name: 'mfconfig', params: { operation: this.selectedOperation } });
    }
  }
};
</script>

MFCONFIG.vue

<template>
  <div class="container">
    <div class="card mx-auto mt-5">
      <div class="card-header">
        <h1 class="text-center">{{ operation }}</h1>
      </div>
      <div class="card-body">
        <div class="text-center mb-3" v-if="equation !== ''">
          <div>
            <h2>{{ equation }}</h2>
          </div>
        </div>
        <div class="form-group text-center">
          <label for="answer-input">Answer:</label>
          <input
            type="number"
            class="form-control"
            id="answer-input"
            v-model="answer"
            @keydown.enter.prevent="checkAnswer"
            autofocus
          />
          <div class="keypad mt-3">
            <button class="btn btn-light" @click="appendToAnswer('1')">1</button>
            <button class="btn btn-light" @click="appendToAnswer('2')">2</button>
            <button class="btn btn-light" @click="appendToAnswer('3')">3</button>
            <button class="btn btn-light" @click="appendToAnswer('4')">4</button>
            <button class="btn btn-light" @click="appendToAnswer('5')">5</button>
            <button class="btn btn-light" @click="appendToAnswer('6')">6</button>
            <button class="btn btn-light" @click="appendToAnswer('7')">7</button>
            <button class="btn btn-light" @click="appendToAnswer('8')">8</button>
            <button class="btn btn-light" @click="appendToAnswer('9')">9</button>
            <button class="btn btn-light" @click="appendToAnswer('0')">0</button>
            <button class="btn btn-light" @click="clearAnswer">Clear</button>
          </div>
          <button class="btn btn-primary mt-3" @click="checkAnswer">Submit</button>
        </div>
        <div class="text-center">
          <h3>Score: {{ score }}</h3>
        </div>
        <div class="text-center">
          <h3>{{ timeLeft }} seconds left</h3>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MFConfig",
  data() {
    return {
      operation: "",
      equation: "",
      answer: "",
      timeLeft: 60,
      score: 0,
    };
  },
  methods: {
    appendToAnswer(num) {
      this.answer += num.toString();
    },
    clearAnswer() {
      this.answer = "";
    },
    checkAnswer() {
      const parsedAnswer = parseInt(this.answer);

      if (parsedAnswer === eval(this.equation)) {
        this.score++;
      }

      this.answer = "";
      this.generateEquation();
    },
    generateEquation() {
      this.answer = "";

      let num1;
      let num2;

      switch (this.operation) {
        case "addition":
          num1 = Math.floor(Math.random() * 100) + 1;
          num2 = Math.floor(Math.random() * 100) + 1;
          this.equation = `${num1} + ${num2}`;
          break;
        case "subtraction":
          num1 = Math.floor(Math.random() * 100) + 1;
          num2 = Math.floor(Math.random() * num1) + 1;
          this.equation = `${num1} - ${num2}`;
          break;
        case "multiplication":
          num1 = Math.floor(Math.random() * 100) + 1;
          num2 = Math.floor(Math.random() * 100) + 1;
          this.equation = `${num1} × ${num2}`;
          break;
        case "division":
          num2 = Math.floor(Math.random() * 100) + 1;
          num1 = num2 * Math.floor(Math.random() * 10) + 1;
          this.equation = `${num1} ÷ ${num2}`;
          break;
      }
      console.log(this.operation);
    },
    countDown() {
      if (this.timeLeft > 0) {
        this.timeLeft--;
      } else {
        clearInterval(this.timer);
        this.$router.push({ name: "GameOver", params: { score: this.score } });
      }
    },
  },
  
  created() {
    this.operation = this.$route.params.operation;
    console.log("Operation in mounted: ", this.operation);
    console.log(this.$route)
    this.generateEquation();

    this.timer = setInterval(this.countDown, 1000);
  },
  beforeUnmount() {
    clearInterval(this.timer);
  },
};
</script>

I have tried several things, including replacing some items inside mounted/created with the watch property to prevent mounted loading before the data is received from the previous page. I’ve also tried changing mounted to created and vice versa. I have tried beforeRouteEnter…etc navigation guard to set the operation before the component is created. None of these have had the desired effect. Any help would be appreciated.

Best Answer:

If your vue-router is set up correctly I believe your code should work. If operations is a route param, make sure it’s defined in the route config

{
  name: "mfconfig",
  path: "/mfconfig/:operation", // defines route param "operation"
  component: () => import("@/components/MFConfig.vue")
}

working sandbox example

If you have better answer, please add a comment about this, thank you!

Source: Stackoverflow.com

Resolved: I need assistance in determining why a data property won’t navigate with a router.push

Question:

Best Answer:

Related