A collapsible select list with checkboxes for children items

Question

A collapsible select list with checkboxes for children items

I am currently developing a website using Vue.js, HTML, and SCSS. I am looking to implement a drop-down functionality similar to the animated example provided in the gif below:

https://i.stack.imgur.com/Mia2D.gif

The gif demonstrates how the drop-down menu should behave; when a hotel is selected, the drop-down should display the available room types within that specific hotel.

I have managed to create a basic version of the drop-down using HTML and Vue's v-if directive. However, the code is complex and contains some bugs. Are there any existing packages or examples that offer a similar drop-down solution? Any suggestions would be greatly appreciated.

Thank you in advance...

Below is my current code:

(Code snippet here)

(More code snippet here)

javascript html css vue.js html-select

Answer 1

Answer №1

Take a look at this helpful solution I've prepared for you. It includes a small component to assist you in making modifications to your code. Hopefully, this will be beneficial to you.

 <template>
  <div class="container">
    <form>
      <div class="row">
      <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
        <div class="form-group">
          <select v-model="selectedValue">
          <option  v-for="(val,key) in formData" :key="key">{{key}}</option>
        </select>
        </div>
        <div class="form-group">
          <app-checkbox :childData="selectedChildData"></app-checkbox>
        </div>
      </div>
    </div>
    {{selectedChildData}}
    </form>

  </div>
</template>

<script>
import AppCheckbox from "./AppCheckbox"
export default {
  data(){
    return {
      formData:{
        test1:["single","double"],
        test2:["sample1","sample2"]
      },
      selectedValue:"",
      selectedChildData:[],
      formDataSelected:[]
    }
  },
  watch:{
    selectedValue(val){
      this.selectedChildData = this.formData[val]
    }
  },
  components:{
    "app-checkbox": AppCheckbox
  }

}
</script>

<style>
</style>

Below is the code snippet for the AppCheckbox Component:

<template>
    <div>
        <div class="form-group" v-if="customData.length != 0 || customData.length != null" v-for="(val,index) in customData" :key="index">
            <input type="checkbox" :value="val" v-model="childSelectedData">{{val}}
        </div>
    </div>
</template>
<script>
export default {
    props:{
        childData:Array
    },
    data(){
        return {
            childSelectedData:[]
        }
    },
    computed:{
        customData:{
            get(){
                return this.childData;
            }
        }
    }
}
</script>

Answer 2

Take a look at this helpful solution I've prepared for you. It includes a small component to assist you in making modifications to your code. Hopefully, this will be beneficial to you.

 <template>
  <div class="container">
    <form>
      <div class="row">
      <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
        <div class="form-group">
          <select v-model="selectedValue">
          <option  v-for="(val,key) in formData" :key="key">{{key}}</option>
        </select>
        </div>
        <div class="form-group">
          <app-checkbox :childData="selectedChildData"></app-checkbox>
        </div>
      </div>
    </div>
    {{selectedChildData}}
    </form>

  </div>
</template>

<script>
import AppCheckbox from "./AppCheckbox"
export default {
  data(){
    return {
      formData:{
        test1:["single","double"],
        test2:["sample1","sample2"]
      },
      selectedValue:"",
      selectedChildData:[],
      formDataSelected:[]
    }
  },
  watch:{
    selectedValue(val){
      this.selectedChildData = this.formData[val]
    }
  },
  components:{
    "app-checkbox": AppCheckbox
  }

}
</script>

<style>
</style>

Below is the code snippet for the AppCheckbox Component:

<template>
    <div>
        <div class="form-group" v-if="customData.length != 0 || customData.length != null" v-for="(val,index) in customData" :key="index">
            <input type="checkbox" :value="val" v-model="childSelectedData">{{val}}
        </div>
    </div>
</template>
<script>
export default {
    props:{
        childData:Array
    },
    data(){
        return {
            childSelectedData:[]
        }
    },
    computed:{
        customData:{
            get(){
                return this.childData;
            }
        }
    }
}
</script>

A collapsible select list with checkboxes for children items

Answer №1

Similar questions

Unable to store loop information fetched from api into a JSON file

Using Slick.JS to Sync Navigation with Main Slider, Automatically Resetting to First Slide

Ways to alter the div post user authentication

Incorporate SVG files into a TypeScript React application using Webpack

The variable (form.onsubmit) remains unset even after assigning a value

Filtering data from Arduino using web serial communication

When attempting to declare a functional component in React utilizing styled-components in TypeScript, an error is encountered stating "No overload matches this call."

Tips for centrally zooming responsive images without altering their dimensions

What is the best way to retrieve the value of a textbox in AngularJS?

Is there a way for me to use an ajax xmlhttprequest to submit all the selected values from my radio buttons?

The angular.copy() function cannot be used within angular brackets {{}}

Developing a division with an image source based on the selection of a checkbox

Issue with content not wrapping inside the body tag (apart from using float or setting body and html to 100

Show the name of the current user in a WordPress form using a readonly input field

Is there a way to retrieve the left offset of a floating element even when it is positioned outside the viewport?

Error: Module not found - Unable to locate 'dropzone'

It appears that the jQuery $.get and $.post methods are not functioning as expected

Converting jQuery into Methods within a VueJS function

What methods are available to adjust the header color on various pages?

"The FindByIdAndUpdate function is successfully updating the data, but it is unexpectedly