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 .
- el-check box filter
- What should Element Plus + Nuxt3 + SASS pacakge.json look like
- Form validation in element-plus
- el-breadcrumb and vue-router
- TS plugin error Element Plus
- Collapsible sidebar using Element-Plus
- Add a loading animation in el-container in Vue3
- Quickly setup Element-Plus UI for Vue
- How to use icons in Element Plus UI
- How to add flexible container in Element Plus – Vue3
Developer stories 