单击复选框时创建函数

Question

这里我需要写一个函数来显示"是水疗中心吗；当用户点击"；Spa"；复选框。这是一个laravel/Vue js项目。

---

这是我为复选框编写的引导程序vue代码

<template>
<b-form-group label="Construction is a: ">
<b-form-checkbox-group
v-model="selected"
:options="options"
name="flavour-2a"
stacked
></b-form-checkbox-group>
</b-form-group>
</template>

<script>
selected: [], // Must be an array reference!
options: [
{ text: 'Pool', value: 'pool' },
{ text: 'Spa', value: 'spa' },
{ text: 'Pool & Spa', value: 'poolAndSpa'},         

],
</script>
// **This is the function I wrote** ,
<b-form-group label="Construction is a: ">
<b-form-radio-group
v-model="selected"
:options="options"
name="poolConstruction"
@change="radioChange($event)"
stacked
></b-form-radio-group>
</b-form-group> 
radioChange: function(e) {
if(this.selected == "spa"||"poolAndSpa"){

document.getElementById("spaRadio").style.display = "block";
}else

{
document.getElementById("spaRadio").style.display = "none";
}

Answer 1

首先让我们明确您需要什么。

1. 单击复选框时，您希望运行一个方法
2. 在该方法中，您将检查单击的复选框的值
3. 如果复选框的值为"spa"，则显示单选按钮，否则隐藏它们

HTML代码：一个粗略的结构，你可以用spaRadioId在div中填充你的单选按钮代码。我们在复选框上添加了@change方法，其余的都是一样的。

<div id="app">
<b-container>
<b-row>    
<b-form-group class="mx-auto">
<b-form-checkbox-group buttons @change="handleChange($event)"  name="butons1" class="customCheck1" :options="chartOptions" v-customcheckbox="chartOptions">
</b-form-checkbox-group>
</b-form-group>      
</b-row>
<b-row>
<p class="mx-auto">  Selcted:  {{ charts }}</p>
</b-row> 
<div id="spaRadio" class="hide">
<p>Radio's here<p>
</div>
</b-container>
</div>

接下来，在该方法中，我们将添加一个条件来检查它是否等于"spa"或"poolAndSpa"。为了检查条件，我们将选择的值与每个期望的过滤器相匹配。这是一种错误的比较。

this.selected == "spa"||"poolAndSpa"

正确的方式：

(this.selected == "spa" || this.selected == "poolAndSpa")

方法：

methods: {
handleChange: function(e) {
const name = e;
this.selected = name; //====> assign selected value
let result = this.selected.find(el=> (el=== "spa") || (el=== "poolAndSpa")); //====> this will search for the filter keywords 'spa' or 'poolAndSpa'
if(result !== undefined){ //====> if any one of them is found then this will return a value else it will be undefind
document.getElementById("spaRadio").style.display = "block"; //===> display radio
}else {
document.getElementById("spaRadio").style.display = "none"; //===> hide
} 
}
},

工作示例：https://codepen.io/AhmedKhan1/pen/LYNQNmw