Pass one string piece of data from parent component to child. Vue.js 2

Question

Hoping someone can see a simple mistake I'm making and help me correct it.

I'm trying to pass one string variable as a prop from a parent to a child. This string reveals itself on a checkbox select. There are three and depending which is selected, the name associated will be passed.

Basically, showing some components if different checkboxes are checked. I can clearly see the variable I'm passing shows up in the parent component just fine. I log it out in the method provided. However, it doesn't pass to the child component. I log out there and get undefined as the result.

I've tried multiple solutions, and read about passing props, but nothing is working.

Parent component looks like this.

<template>

  <v-col>
    <v-checkbox
      label="LS"
      color="primary"
      value="ls"
      v-model="checkedSensor"
      @change="check($event)"
      hide-details
    /></v-checkbox>
  </v-col>

  <v-col cols="2" class="mx-auto">
    <v-checkbox
      label="DG"
      color="primary"
      value="dg"
      v-model="checkedSensor"
      @change="check($event)"
      hide-details
     />
   </v-col>

   <v-col cols="2" class="mx-auto">
     <v-checkbox
       label="CR"
       color="primary"
       value="cr"
       v-model="checkedSensor"
       @change="check($event)"
       hide-details
     />

     <ls-sensor v-if="lsSensor" :sensorType="checkedSensor" />

</template>

<script>

  export default{

    data() {
      return {
        checkedSensor: " ",
        lsSensor: false,
        dgSensor: false,
        crSensor: false,
      };
    },

    methods: {

      check: function (e) {
        this.showDeviceComponent(e);
      },

      showDeviceComponent(e) {

        if (e == "ls") {

          this.lsSensor = true;
          this.crSensor = false;
          this.dgSensor = true;

          console.log("file input component", this.checkedSensor)

        } else if (e == "dg") {

          this.dgSensor = true;
          this.lsSensor = false;
          this.crSensor = false;

        } else {

          this.crSensor = true;
          this.dgSensor = false;
          this.lsSensor = false;

        }

      },

    },

  }
</script>

Child component (just putting the script here as I don't have it's place in the template yet. In the mounted method, I should be seeing the value from the prop. It's showing up as undefined. Gahh.. what silliness I have made a mistake on? Your help is greatly appreciated.


export default {

   props:['sensorType'],

   data() {
     return {
       coating: false,
     };
    },

    mounted() {
      console.log("required input component, sensor type", this.sensorType)
    },

    components: {

      coatings: require("@/components/shared/FormData/Coatings.vue").default,
      "ls-sensor-panel": require("@/components/shared/FormData/LS_SensorPanel.vue").default,
    },
  };

if you only have one model which has one value then you should probably use v-radio, I cant really see from your code how it goes from string ` ` to undefined though, but if its simply not showing it might be because when the check one it fires the event on all the others which then perhaps simply doesn't show it due to which order the stack effects the value — Lawrence Cherone
– Lawrence Cherone, Commented Nov 11, 2021 at 16:48
also seems if you use multiple checkboxes with the same model then its going to be an array not a string vuetifyjs.com/en/components/checkboxes/#model-as-array — Lawrence Cherone
– Lawrence Cherone, Commented Nov 11, 2021 at 16:54
@LawrenceCherone I had wondered if the check event somehow lets the parent component see it fine, but maybe the lifecycle hooks get screwy and don't pass it correctly? I'm taking wild guesses here Only one gets selected though on the checkboxes.. once that happens the others don't get touched. Would they still need to be in an array? — swapmeet_Lou
– swapmeet_Lou, Commented Nov 11, 2021 at 16:55
not sure, though id refactor the code to use <component :is="checkedSensor" /> and make the value on the checkbox to set which component to use (input-value="ls-sensor") then use v-bind to add different props, it would save doing all the boolean switching — Lawrence Cherone
– Lawrence Cherone, Commented Nov 11, 2021 at 16:59
@LawrenceCherone appreciate your help. I found my issue. I was doing everything right when passing the prop down, but what I glossed over was I had another component in the middle of these two. That's where the prop was being sent. A big ol Homer "doooohhhh" came out. I'll post my response below — swapmeet_Lou
– swapmeet_Lou, Commented Nov 12, 2021 at 14:17

Marc · Accepted Answer · 2021-11-11 18:18:47Z

1

The only thing that stands out to me is when you create camel cased property names, I am pretty sure that those have to be written as dash (-) separated attributes on a component?

<ls-sensor v-if="lsSensor" :sensor-type="checkedSensor" />

So prop: ['sensorType'] is passed as :sensor-type=""

answered Nov 11, 2021 at 18:18

Marc

5,5032 gold badges34 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

swapmeet_Lou Over a year ago

You're definitely right there. I came across that same thing yesterday. That would have popped up had I not found that and fixed it along with my oversight. Which led to this problem. Silly me. I simply missed what I had done and why this was happening.

Collectives™ on Stack Overflow

Pass one string piece of data from parent component to child. Vue.js 2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related