2021-12-01

Vue.js radio button no reactive

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?



from Recent Questions - Stack Overflow https://ift.tt/3G2Y4z4
https://ift.tt/eA8V8J

No comments:

Post a Comment