Занялся изучением VUE
Нашел уже готовый пример небольшого проекта
ЛИНК пытаюсь его адаптировать для своих нужд
Он написан грубо говоря одним модулем, а хоте бы спросить и узнать как этот функционал разбить на отдельные модули, для использования с VUE CLI.
Сейчас сделал так:
List.vue<template>
<div class="container">
<div class="row">
<div class="col">
<table class="table table-bordered table-hover table-striped table-xs-block">
<caption>
<div class="pull-right multiple-action">
<div class="search">
<div class="input-group">
<input type="search" class="form-control" placeholder="Search by Name" v-model="search">
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
</div>
</div>
<div class="dropdown filterbox" :class="{ 'open': filterToggle }">
<button type="button" class="btn btn-success" v-on:click="filterToggle = !filterToggle">
<i class="glyphicon glyphicon-filter"></i>
</button>
<ul class="dropdown-menu list-group">
<li class="list-group-item">
<label>Filter by Status</label>
</li>
<li class="list-group-item">
<input type="checkbox" value="actived">Actived
</li>
<li class="list-group-item">
<input type="checkbox" value="deactived">Deactived
</li>
<li class="list-group-item">
<input type="checkbox" value="created"> Created
</li>
</ul>
</div>
<button type="button" class="btn btn-primary">
<i class="glyphicon glyphicon-plus" v-on:click="openModal()"></i>
</button>
</div>
</caption>
<thead class="bg-primary">
<tr>
<th v-on:click="sortById = !sortById">ID</th>
<th v-on:click="sortByName = !sortByName">Name</th>
<th v-on:click="sortByLocation = !sortByLocation">Location</th>
<th v-on:click="sortByCurrency = !sortByCurrency">Currency</th>
<th> Action </th>
</tr>
</thead>
<tr v-for="item in liveSearch ">
<td v-text="item.id"></td>
<td v-text="item.name"></td>
<td v-text="item.location"></td>
<td v-text="item.currency"></td>
<td>
<button type="button" class="btn btn-warning">
<i class="glyphicon glyphicon-edit" v-on:click="showModal=true"></i>
</button>
<button type="button" class="btn btn-danger">
<i class="glyphicon glyphicon-trash"></i>
</button>
<!--<button v-on:click="showModal=true" class="uk-button uk-button-primary">Show Modal</button>-->
</td>
</tr>
<tr>
<td colspan="4" style="float: right">
<b style="float: right">Итого - {{ total }} у.е.</b>
</td>
</tr>
</table>
<modal v-if="showModal" v-on:close="showModal = false">
<h3 slot="title">Item</h3>
<div slot="body" >
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-ban-circle"></i>
</span>
<input type="text" class="form-control">
</div>
<span class="help-block">Id is invalid!</span>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-ban-circle"></i>
</span>
<select class="form-control">
<option value="created">Created</option>
<option value="actived">Actived</option>
<option value="deactived">Deactived</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group" >
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</span>
<input type="text" class="form-control" placeholder="Fullname">
</div>
<span class="help-block" >Name is empty!</span>
</div>
<div class="form-group" >
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-time"></i>
</span>
<input type="text" class="form-control" placeholder="Old">
</div>
<span class="help-block" >Old is empty!</span>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-envelope"></i>
</span>
<input type="text" class="form-control" placeholder="Email Address" >
</div>
<span class="help-block" >Email is empty!</span>
<span class="help-block" >Email is invalid!</span>
</div>
<button type="button" class="btn btn-primary" v-on:click="submit(item)">Submit</button>
</div>
<!-- <div slot="footer" class="text-center"></div> -->
</modal>
</div>
</div>
</div>
</template>
<script>
import test from '../static/test.json'
import Modal from './Modal'
export default {
component:{Modal},
name: "list",
data() {
return {
showModal: false,
filterToggle: false,
data: test,
search: '',
sortedBy: '',
}
},
computed: {
total: function () {
return this.liveSearch.reduce(function (sum, next) {
return sum + next.currency;
}, 0);
},
liveSearch: function () {
return this.data.filter((item) => {
return item.name.toLowerCase().match(this.search.toLocaleLowerCase()) ||
item.id.match(this.search) ||
item.location.match(this.search) ||
item.currency.toString().match(this.search.toString())
})
},
sortById: function (val) {
this.data = this.sortBy(this.data, 'id', val);
},
sortByName: function (val) {
this.data = this.sortBy(this.data, 'name', val);
},
sortByLocation: function (val) {
this.data = this.sortBy(this.data, 'location', val);
},
sortByCurrency: function (val) {
this.data = this.sortBy(this.data, 'currency', val);
},
},
methods: {
openModal: function () {
this.showModal = true;
},
sortBy: function(array, param, reverse) {
let filterA, filterB;
return array.sort(function (a, b) {
switch (param) {
case 'id':
filterA = a.id;
filterB = b.id;
break;
case 'name':
filterA = a.name;
filterB = b.name;
break;
case 'location':
filterA = a.location;
filterB = b.location;
break;
case 'currency':
filterA = Number(a.currency);
filterB = Number(b.currency);
break;
}
if (reverse) {
return (filterA > filterB) ? 1 : -1;
} else {
return (filterA < filterB) ? 1 : -1;
}
});
},
}
}
</script>
<style scoped>
</style>
Modal.vue<template>
<transition name="modal">
<div class="modal-mask">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary">
<button type="button" class="close" v-on:click="$emit('close')"><span aria-hidden="true">×</span></button>
<slot name="title">Modal Title</slot>
</div>
<div class="modal-body">
<slot name="body"></slot>
</div>
<div class="modal-footer">
<slot name="footer"></slot>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'modal',
src: '',
data() {
return {
// filterToggle: false,
}
},
methods:{
}
}
</script>
<style scoped>
</style>
Но мне кажется или компонент modal который описан в list.vue должен находится в modal.vue ?
