Element Plus is a Vue 3 UI library which help developers and UI designers quickly build apps and components. Most of the parts of the library coming from the Chinese contributor and has large user base.

Check box

Element-plus allow us to use dedicated el-check box component, which is very easy to setup model and retrieve user response from the UI.

What about a list of Check boxes ?

For using group of list boxes in Vue3 or Nuxt 3 apps, consider the el-checkbox-group component. In a regular html , we need to used form for reading input from Check boxes..

Following is the simple category example (Vue3)

    <el-checkbox-group v-model="checkList">       <div v-for="cat in store.categories" :key="cat.id">       <el-badge class="item" :value="cat.posts.length">        <el-checkbox :label="cat.name" />               </el-badge>        </div>     </el-checkbox-group>                            <script lang="ts"> import { defineComponent, ref } from "vue"; import { useCategory } from "@/store/categories";  export default defineComponent({   setup() {     const store = useCategory();     store.getCategories();     const checkList = ref([]);     return {       checkList,       store,     };   }, }); </script>

In the above we declare a reactive property for the v-model, and read a list of categories from the store and create a group check boxes. When the user tick the boxes (el-checkbox-group) the value is added to the list .

 This free site is ad-supported. Learn more
​