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

Using scale transformations to animate SVG group elements

What is the best way to incorporate a Vue3 Pinia store into the methods of a component?

Executing asynchronous operations and handling responses in Node.js with Express

Currently in motion post file selection

Invoking a React function repeatedly (every second)

JavaScript can be used to create dynamic frames within a

ReactJS - What is the best way to output a string from a functional component?

Have you ever wondered why req.body returns as undefined when using body parser?

Modify the contents of an array within a string using JavaScript

Ways to determine the height of a responsive div's background image

The checkbox tab index fails to function properly when set to hidden with a custom design

Passing parameters in a jQuery function through a button click

What is the best way to retrieve the value of a selected radio button with YUI?

Can a JavaScript function be sent back via AJAX from PHP?

Changing the Values of Variables in an npm Package within SvelteKit

Equal-sized tiles in Highchart treemaps

What is the best way to effectively integrate jQuery plugins into Node.JS?

Looking to parse and iterate over JSON data retrieved from a query using Express and Jade?

Wait until the user submits the form before activating Angular validations, and do not display any validation messages if the user deletes text from a text box

How to make a DIV element the same width as a TABLE element