在复选框单击时创建函数

Question

这里我需要写一个函数，当用户点击“Spa”时显示“is the spa”部分checkbox.This是一个laravel/Vuejs项目。

这是我为复选框编写的 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

首先让我们弄清楚你需要什么。

当复选框被点击时，你想要运行一个方法
在该方法中，您将检查单击的复选框的值。
如果复选框的值为'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

在复选框单击时创建函数

Creating a function at checkbox click

javascript

vue.js

bootstrap-vue

laravel-7