我正在嘗試將單選按鈕值傳遞給其父級,示例如下:
孩子
<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>
我正在嘗試使用無線電資料來隱藏或顯示父組件中的某些元素。在初始選擇中它可以作業,但在更改單選選擇后它不會更新父級。在我的情況下,如何使無線電資料具有反應性?
uj5u.com熱心網友回復:
您在呼叫時傳遞了一個引數,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;
}
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/370453.html
標籤:javascript Vue.js 单选按钮 Vue反应性
上一篇:如何從API獲取隨機資料
