Posted on Apr 26, 2023

Add Vue and Vuetify DataTable

https://www.bezkoder.com/vue-3-crud/
vue create projectName vue add vuetify npm install axios npm install vue-router@4 npm remove @vue/cli-plugin-eslint

https://www.bezkoder.com/vue-3-crud/

https://vuetifyjs.com/en/components/data-tables/basics/

Create Router.js file

import { createWebHistory, createRouter } from "vue-router"; const routes = [ { path: "/", alias: "/Tutorial", name: "Tutorial", component: () => import("./components/Tutorial") } ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router;

Update Main.js

import 'vuetify/styles' import { createApp } from 'vue' import App from './App.vue' import vuetify from './plugins/vuetify' import { loadFonts } from './plugins/webfontloader' import 'vuetify/labs/VDataTable' loadFonts() createApp(App) .use(vuetify) .mount('#app')

add http-common.js please update 7017 to our port number

import axios from "axios"; export default axios.create({ baseURL: "https://localhost:7017/api", headers: { "Content-type": "application/json", "Access-Control-Allow-Origin":"*", } });

Update App.vue

<template> <v-app> <v-main> <Tutorial/> </v-main> </v-app> </template> <script> import Tutorial from './components/Tutorial.vue' export default { name: 'App', components: { Tutorial, }, data: () => ({ // }), } </script>

Create services folder then create TutorialDataService.js file.

import http from "../http-common"; class TutorialDataService { getAll() { return http.get("/Tutorial"); } get(id) { return http.get(`/Tutorial/${id}`); } update(id, data) { return http.put(`/Tutorial/${id}`, data); } create(data) { return http.post("/Tutorial", data); } } export default new TutorialDataService();

Update plugin-->vuetify.js to below code.

import '@mdi/font/css/materialdesignicons.css' import 'vuetify/styles' import { createVuetify } from 'vuetify' import * as labs from 'vuetify/labs/components' export default createVuetify({ components: { ...labs, }, })

Create New Componenet Tutorial.vue

<template> <v-data-table :headers="headers" :items="communities" :sort-by="[{ key: 'surname', order: 'asc' }]" class="elevation-1"> <template v-slot:top> <v-toolbar flat> <v-toolbar-title>My CRUD</v-toolbar-title> <v-divider class="mx-4" inset vertical></v-divider> <v-spacer></v-spacer> <v-dialog v-model="dialog" max-width="500px"> <template v-slot:activator="{ props }"> <v-btn color="primary" dark class="mb-2" v-bind="props"> New Item </v-btn> </template> <v-card> <v-card-title> <span class="text-h5">{{ formTitle }}</span> </v-card-title> <v-card-text> <v-container> <v-row> <v-col cols="12" sm="6" md="4"> <v-text-field disabled hide-details v-model="editedItem.id" label=""></v-text-field> </v-col> <v-col cols="12" sm="6" md="4"> <v-text-field :rules="['Required']" v-model="editedItem.givenName" label="Given Name"></v-text-field> </v-col> <v-col cols="12" sm="6" md="4"> <v-text-field :rules="['Required']" v-model="editedItem.surname" label="Sur Name"></v-text-field> </v-col> <v-col cols="12" sm="6" md="4"> <v-text-field :rules="['Required']" v-model="editedItem.birthDate" label="Birth Date"></v-text-field> </v-col> <v-col cols="12" sm="6" md="4"> <v-text-field v-model="editedItem.email" label="Email"></v-text-field> </v-col> <v-col cols="12" sm="6" md="4"> <v-text-field v-model="editedItem.phoneNumber" label="Phone Number"></v-text-field> </v-col> </v-row> </v-container> </v-card-text> <v-card-actions> <v-spacer></v-spacer> <v-btn color="blue-darken-1" variant="text" @click="close"> Cancel </v-btn> <v-btn color="blue-darken-1" variant="text" @click="save"> Save </v-btn> </v-card-actions> </v-card> </v-dialog> <v-dialog v-model="dialogDelete" max-width="500px"> <v-card> <v-card-title class="text-h5">Are you sure you want to delete this item?</v-card-title> <v-card-actions> <v-spacer></v-spacer> <v-btn color="blue-darken-1" variant="text" @click="closeDelete">Cancel</v-btn> <v-btn color="blue-darken-1" variant="text" @click="deleteItemConfirm">OK</v-btn> <v-spacer></v-spacer> </v-card-actions> </v-card> </v-dialog> </v-toolbar> </template> <template v-slot:item.actions="{ item }"> <v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon> </template> <template v-slot:no-data> <v-btn color="primary" @click="initialize"> Reset </v-btn> </template> </v-data-table> </template> <script> import TutorialDataService from '@/services/TutorialDataService' export default { data: () => ({ dialog: false, dialogDelete: false, headers: [ { title: 'Given Name', align: 'start', sortable: false, key: 'givenName', }, { title: 'SurName', key: 'surname' }, { title: 'Birth Date', key: 'birthDate' }, { title: 'Email', key: 'email' }, { title: 'Phone Number', key: 'phoneNumber' }, { title: 'Actions', key: 'actions', sortable: false }, ], communities: [], editedIndex: -1, editedItem: { id: null, givenName: '', surname: '', birthDate: new Date().toISOString().substr(0, 10), email: '', phoneNumber: '', }, }), computed: { }, watch: { dialog(val) { val || this.close() } }, created() { this.initialize() }, methods: { initialize() { // Call get api }, editItem(item) { //call edit api }, close() { this.dialog = false this.$nextTick(() => { this.editedItem = Object.assign({}, this.defaultItem) this.editedIndex = -1 }) }, save() { call update api this.close() }, }, } </script>