Am working on an SPA using Vuejs and Vuex. I'm setting some data in the store and showing it in a child component. In the child component, there are radio buttons, which when clicked, I call a function called getCalculations where I log the vehicle object but I keep getting undefined error. The child component is further embedded in 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>
{"reg_no": "KAS 234R", "chasis_number": "BGSHS-IUISUS", "engine_number": "MNVSS-8787SNS"}[Vue warn]: Error in v-on handler: "ReferenceError: vehicle is not defined"