Vue.js 单选按钮没有反应答案

【问题标题】：Vue.js radio button no reactiveVue.js 单选按钮没有反应
【发布时间】：2022-01-07 02:55:15
【问题描述】：

我正在尝试将单选按钮值传递给其父级这是一个例子：

孩子

<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>

父母

<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>

我正在尝试使用无线电数据来隐藏或显示父组件中的某些元素。在初始选择中它可以工作，但在无线电选择更改后它不会更新父项。在我的情况下，如何使无线电数据具有反应性？

【问题讨论】：

标签： javascript vue.js radio-button vue-reactivity

【解决方案1】：

你在调用this.$emit('input', 'TypeOne');时传递了一个参数但发出的方法不接受参数。

在onTypeChange() 上添加一个参数并在您的逻辑上使用该参数

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

【讨论】：

这解决了我的问题。谢谢。