在复选框单击时创建一个函数

Question

这里我需要编写一个函数来在用户点击“Spa”复选框时显示“is the spa”部分。这是一个 laravel/Vue js 项目。

---

这是我为复选框编写的 bootstrap-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 代码： 一个粗略的结构，您可以在 div 中使用spaRadio Id 填充您的单选按钮代码。我们在复选框上添加了@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