0

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>
4
  • In the child component, if you {{ vehicle }}, what do you see? Commented Jul 31, 2020 at 17:17
  • @RaymondCamden It shows an object of all the values in the store state {"reg_no": "KAS 234R", "chasis_number": "BGSHS-IUISUS", "engine_number": "MNVSS-8787SNS"} Commented Jul 31, 2020 at 18:11
  • @RaymondCamden But when I log, I get undefined error [Vue warn]: Error in v-on handler: "ReferenceError: vehicle is not defined" Commented Jul 31, 2020 at 18:24
  • I honestly can't see the issue. Can you recreate in a CodePen? Commented Aug 1, 2020 at 15:15

1 Answer 1

1

simply change your code as:

const state = {
    //Vehicle Data
    vehicleData: {
        reg_no: "KAS 234R",
        chasis_number: "BGSHS-IUISUS",
        engine_number: "MNVSS-8787SNS"
    }   
}

const getters = {
vehicle: (state) => state.vehicleData
}

and get vehicle state as:

...mapGetters(['vehicle'])
   this.vehicle.reg_no
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.