Vue.js radio button no reactive

Question

I am trying to pass the radio button value to its parent here is the example:

Child

<template>
  <radio v-model="type" value="TypeOne" @change="TypeOne()"></el-radio>
  <radio v-model="type" value="TypeTwo" @change="TypeTwo()"></el-radio>
</template>

<script>     
 export default {
  methods: {
      TypeOne() {
        this.$emit('input', 'TypeOne');
      },
      TypeTwo() {
        this.$emit('input', 'TypeTwo');
      }
    }
 }
</script>

parent

<template>
 <component @input="onTypeChange"></component>
 <div v-show="type"></div>
 <div v-show="!type"></div>
</template>

<script>
 export default {
   data() {
     return {
       type: 'true',
     };
   },
   methods: {
    onTypeChange () {
      var TypeOne = false
      var TypeTwo = false
      if (TypeOne == TypeOne) {
        this.type = false;
      } else if (TypeTwo == TypeTwo) {
        this.type = true;
      } else {
          console.log('typeChanged');
          return false;
      }
    }
  }
 }
</script>

I am trying to use radio data to hide or show some element in the parent component. in initial selection it works but after radio selection is changed it does not update the parent. How can I make the radio data reactive in my case?

renzivan · Accepted Answer · 2021-11-30 19:15:24Z

2

You passed a parameter when you called this.$emit('input', 'TypeOne'); but the method emitted is not accepting a parameter.

Add a parameter on onTypeChange() and use the parameter on your logic

onTypeChange (type) {
  if (type == 'TypeOne') {
    this.type = false;
  } else if (type == 'TypeTwo') {
    this.type = true;
  } else {
    console.log('typeChanged');
    return false;
  }
}

answered Nov 30, 2021 at 19:15

renzivan

1216 bronze badges

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

1 Comment

Ali Seivani Over a year ago

This fixed my problem. Thank you.

Collectives™ on Stack Overflow

Vue.js radio button no reactive

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