Can anyone help me understand why I'm receiving unexpected results? I am using v2 vue.js.
In my project, I have a single file component for a Vue component. The component is supposed to render data imported from "excerciseModules" in JSON format.
The rendering logic is dynamic and based on the URL path, it should determine which data to fetch from the JSON and display it on the page. However, the rendering happens before this logic, and I can't figure out why. I have implemented similar views successfully in the past, so I'm confused about what's different here.
I decided to handle the data loading in one view component without creating multiple routes. But currently, the data loads empty initially with the placeholder name "TrainingModules," and then loaded with old data on subsequent renders.
For example, when the URL path is "/module1", the page loads empty initially.
Then, if the next path is "/module2", the page still shows module 1.
And when the path is changed back to "/module1", only then does module 2 appear.
//My route
{
path: '/excercises/:type',
name: 'excercises',
props: {},
component: () => import( /* webpackChunkName: "about" */ '../views/training/Excercises.vue')
}
<template>
<div class="relatedTraining">
<div class="white section">
<div class="row">
<div class="col s12 l3" v-for="(item, index) in trainingModules" :key="index">
<div class="card">
<div class="card-content">
<span class="card-title"> {{ item.title }}</span>
<p>{{ item.excercise }}</p>
</div>
<div class="card-action">
<router-link class="" to="/Grip">Start</router-link>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
console.log('script');
let trainingModules; //when initialized this is empty, but I would expect it to not be when the vue is rendered due to the beforeMount() in the component options. What gives?
/* eslint-disable */
let init = (params) => {
console.log('init');
console.log(trainingModules);
trainingModules = excerciseModules[params.type];
//return trainingModules
}
import { getRandom, randomImage } from '../../js/functions';
import { excerciseModules } from '../excercises/excercises_content.js'; //placeholder for JSON
export default {
name: 'excercises',
components: {
},
props: {
},
methods: {
getRandom,
randomImage,
init
},
data() {
return {
trainingModules,
}
},
beforeMount(){
console.log('before mount');
init(this.$route.params);
},
updated(){
console.log('updated');
},
mounted() {
console.log('mounted');
//console.log(trainingModules);
}
}
</script>