Discover the solution below, including a toggle feature and instructions on managing data binding for the input fields:
<template>
<div>
<div id="list1" class="dropdown-check-list" tabindex="100" :class="fruitsListvisible ? 'visible' : ''">
<span class="anchor" @click="toggleFruitList">Select Fruits</span>
<ul class="items">
<li><label for="Apple"><input v-model="selectedFruits" id="Apple" value="Apple" type="checkbox" />Apple</label></li>
<li><label for="Orange"><input v-model="selectedFruits" id="Orange" value="Orange" type="checkbox" />Orange</label></li>
<li><label for="Grapes"><input v-model="selectedFruits" id="Grapes" value="Grapes" type="checkbox" />Grapes </label></li>
<li><label for="Berry"><input v-model="selectedFruits" id="Berry" value="Berry" type="checkbox" />Berry </label></li>
<li><label for="Mango"><input v-model="selectedFruits" id="Mango" value="Mango" type="checkbox" />Mango </label></li>
<li><label for="Banana"><input v-model="selectedFruits" id="Banana" value="Banana" type="checkbox" />Banana </label></li>
<li><label for="Tomato"><input v-model="selectedFruits" id="Tomato" value="Tomato" type="checkbox" />Tomato</label></li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
fruitsListvisible: false,
selectedFruits: [],
};
},
methods: {
toggleFruitList() {
this.fruitsListvisible = !this.fruitsListvisible;
},
},
};
</script>
<style scoped>
.dropdown-check-list {
display: inline-block;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: block;
}
</style>
https://codepen.io/jeremykenedy/pen/yLMBwBP