<template> <div> <md-table v-model="users" md-sort="title" md-sort-order="asc" md-card md-fixed-header> <md-table-row slot="md-table-row" slot-scope="{ item }" style="margin-top:100px"> <md-table-cell md-label="재고" md-sort-by="stock" md-numeric> {{ item.stock }} </md-table-cell> <md-table-cell md-label="전공" md-sort-by="major"> {{ item.major }} </md-table-cell> <md-table-cell md-label="책이름" md-sort-by="title"> {{ item.title }} </md-table-cell> <md-table-cell> <md-button class="md-primary md-raised">구매</md-button> </md-table-cell> <md-table-cell> <md-button class="md-raised md-accent">판매</md-button> </md-table-cell> </md-table-row> </md-table> </div> </template> <script> const toLower = text => { return text.toString().toLowerCase(); }; const searchByName = (items, term) => { if (term) { return items.filter(item => toLower(item.title).includes(toLower(term))); } return items; }; export default { name: "TableSearch", data: () => ({ users: [ ] }), methods: { }, created() { this.$http.get("/api/books").then(response => { this.users = response.data; console.log("success"); console.log(this.users); }); } }; </script> <style lang="scss" scoped> .md-field { max-width: 500px; } </style>