Vue.js 单选按钮无反应

Question

我正在尝试将单选按钮值传递给它的 parent 这是示例：

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>

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

Answer 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;
  }
}

Vue.js 单选按钮无反应

Vue.js radio button no reactive

javascript

radio-button

vue.js

vue-reactivity