Currently, I am developing a Single Page Application (SPA) using Vue.js and Vuex. Within this project, I have set up some data in the store and displayed it in a child component. This child component includes radio buttons that trigger a function called getCalculations when clicked. However, I am encountering an issue where I keep receiving an undefined error when trying to log the vehicle object within the getCalculations function. It is important to note that the child component is nested within a parent component.
Vuex Store
const getDefaultState = () => {
return {
//Vehicle Data
vehicleData: {
reg_no: "KAS 234R",
chasis_number: "BGSHS-IUISUS",
engine_number: "MNVSS-8787SNS"
}
}
}
const state = getDefaultState()
//getters
const getters = {
vehicle: (state) => state.vehicleData
}
//actions
const actions = {
//......
}
//mutations
const mutations = {
// .....
}
export default {
state,
getters,
actions,
mutations
}
Parent Component
<template>
<div>
<vehicleFeature/>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import vehicleFeature from "./partials/vehicleFeature";
export default {
name: "StepFour",
data() {
return {
//.....
};
},
computed: mapGetters(["vehicle"]),
components:{
vehicleFeature
}
</script>
Child Component
<template>
<div>
<form class="ipf_form">
<div class="inputGroup">
<input id="radio4" name="radio" @change="getcalculations" type="radio" value="4">
<label for="radio4">1 INSTALMENTS</label>
</div>
<div class="inputGroup">
<input id="radio5" name="radio" @change="getcalculations" type="radio" value="5" >
<label for="radio5">2 INSTALMENTS</label>
</div>
</form>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "vehicleFeature",
data() {
return {
//.....
};
},
computed: {
...mapGetters(["vehicle"]),
principalamount(){
//.....
}
},
methods: {
getcalculations() {
console.log(this.vehicle.reg_no);
}
}
</script>
<style scoped>
</style>