Vue.js 單選按鈕無反應

Question

我正在嘗試將單選按鈕值傳遞給其父級，示例如下：

孩子

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

我正在嘗試使用無線電數據來隱藏或顯示父組件中的某些元素。 在初始選擇中它可以工作，但在無線電選擇更改后它不會更新父項。 在我的情況下，如何使無線電數據具有反應性？

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