Vue bildiğiniz gibi component mantığı ile çalışıyor. O yüzden bizde bir dinamik tablo yapalım. Farklı json dosyalarındaki verileri buton ile tetikleyerek o tablo üzerinde gösterelim.
Powershell’i açarak projeyi oluşturmak istediğimiz konuma gidelim ve aşağıdaki komut ile yeni bir proje oluşturalım.
Proje oluşturulduktan sonra bir IDE kullanarak projemizi açıyoruz. Terminalde aşağıdaki komutu koşarak projemizi çalıştırıyoruz.
Daha sonra projemizde src/components altına DynamicDataTable.vue adında yeni bir vue dosyası oluşturalım. Componentimizde Vuetify’ın özelliklerini kullanacağımız için terminalde aşağıdaki komutu koşalım.
Daha sonra main.js dosyasının içinde Vuetify’ın eklendiğini görebilirsiniz.
Eklediğimiz DynamicDataTable.vue componentini açalım ve bir data table tanımlayalım.
Buraya tıklayarak vuetifyjs sitesinden bir data table seçebilirsiniz. Buradan da data tableda kullanılan propertylerin ne işe yaradığına bakabilirsiniz. Template taginin içine bir v-data-table ekliyoruz.
<v-data-table :headers="showHeader"
:items="showItems"
item-key="item.id"
class="elevation-1"
:search="search"
:custom-filter="filterText">
<template v-slot:top>
<v-text-field v-model="search"
label="Search"
class="mx-4">
</v-text-field>
</template>Data Table içerisinde kullandığım propertyler:
headers: Tabloda kullanılacak dataların başlıklarıdır.
items:Tabloda görüntülecek data arrayidir.
item-key:Tablo görüntülenirken kullanılacak benzersiz alandır.
search: Tablodaki dataları arama yapabilmek için kullanılır.
custom-filter: Tablodaki dataları filtreme işlemi için kullanılır.
Template v-slot:top tagi (Data Table’ın üstünde olduğunu gösterir.) içerisinde de search işlemi için text field tanımladım.
Daha sonra script tagi içerisinde search adında yeni bir variable tanımlayalım ve filterText isminde bir method tanımlayalım. Bu method ile data tableda arama yapabileceğiz.
data: function (){
return{
search:'',
};
},
methods: {
filterText(value, search) {
return value != null &&
search != null &&
typeof value == 'string' &&
value.toString().indexOf(search) !== -1
},
},
Terminalde aşağıdaki komutu koşuyoruz.
Bu arada ben projeme iki tane json dosyası ekledim. Json dosyalarına github repomdan ulaşabilirsiniz.
Daha sonra store.js isminde yeni bir javascript dosyası oluşturuyorum ve içerisine dynamic data tableda kullanacağım metot ve değişkenleri tanımlıyorum. Metotların içerisinde Data Table’ın headerında bulunması gereken elemanları tanımladım. Items isminde bir array tanımladım. Bu arrayde json dosyasını tutacağım.
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state:{
url:"",
items: []
},
getters:{
showUsers(){
return {
selectedItem: {},
showDialog: false,
search: '',
headers: [
{text: "", value: "action"},
{text:"ID", value: 'user_id'},
{
text: 'Name',
align: 'start',
sortable: 'false',
value: 'user_name'
},
{text: 'Last Name', value: 'user_lastname'},
{text: 'E-Mail', value: 'user_email'}
],
}
},
showCategories(){
return {
selectedItem: {},
showDialog: false,
search: '',
headers: [
{text: "", value: "action"},
{text:"ID", value: 'category_id'},
{
text: 'Category Name',
align: 'start',
sortable: 'false',
value: 'category_name'
},
{text: 'Description', value: 'category_description'},
],
}
}
}
});Aynı zamanda main.js dosyasına da Store’ı import ediyorum.
import {<strong><em>store</em></strong>} from "./store/store"
new Vue({
vuetify,
<strong><em>store</em></strong>,
render: h => h(App)
}).$mount('#app')
App.vue compenentinin içerisinde iki adet v-btn tanımlıyorum ve DynamicDataTable componentini buraya component olarak ekliyorum. Butonların click eventına url ve jsonı da set etmek için iki ayrı metot yazıyorum.
<template>
<div>
<v-btn @click="showUserList" >User</v-btn>
<v-btn @click="showCategoryList" >Category</v-btn>
<br>
<dynamicdata-table></dynamicdata-table>
</div>
</template>
<script>
import DynamicDataTable from "@/components/DynamicDataTable";
import CategoryJson from "./assets/category";
import UserJson from "./assets/user";
export default {
components: {
dynamicdataTable:DynamicDataTable,
},
data: () => ({
//
}),
methods: {
showUserList() {
this.$store.state.url = "Users";
this.$store.state.items = UserJson.users;
},
showCategoryList() {
this.$store.state.url = "Categories";
this.$store.state.items = CategoryJson.categories;
}
},
};
</script>
Son olarak DynamicDataTable componentinde de App.vue’da set ettiğim dataları return eden iki ayrı computed metot yazıyorum.
computed: {
showItems(){
return this.$store.state.items;
},
showHeader(){
if (this.$store.state.url == "Users") {
return this.$store.getters.showUsers.headers;
} else if (this.$store.state.url == "Categories") {
return this.$store.getters.showCategories.headers;
}
},Her şey tamam şimdi projemizi çalıştırma zamanı:
Projenin tamamına Github repositorymden ulaşabilirsiniz.