概要
plunkerでvueやってみた。
練習問題、やってみた。
三日、かかった。
練習問題
vuetifyとaxiosを使って、crudを実装せよ。
サンプルコード
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="//unpkg.com/vuetify@1.5.18/dist/vuetify.min.css">
<link rel="stylesheet" href="//cdn.materialdesignicons.com/3.5.95/css/materialdesignicons.min.css">
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/vuetify@1.5.18/dist/vuetify.min.js"></script>
<script src="//unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="lib/style.css">
</head>
<body>
<v-app id="app">
<v-container>
<v-row>
<v-col cols="10">
<v-toolbar flat color="white">
<v-toolbar-title>My CRUD</v-toolbar-title>
<v-divider class="mx-2" inset vertical ></v-divider>
<v-spacer></v-spacer>
<v-dialog v-model="dialog" max-width="500px">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark class="mb-2" v-on="on">New Item</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.name" label="name"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.email" label="email"></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat @click="close">Cancel</v-btn>
<v-btn color="blue darken-1" flat @click="save">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
<v-data-table :headers="headers" :items="serverDatas">
<template slot="items" slot-scope="props">
<td class="text-xs-left">{{ props.item.id }}</td>
<td class="text-xs-left">{{ props.item.name }}</td>
<td class="text-xs-left">{{ props.item.email }}</td>
<td class="justify-center layout px-0">
<v-btn small color="aqua" @click="editItem(props.item)">
edit
</v-btn>
<v-btn small color="error" @click="deleteItem(props.item)">
delete
</v-btn>
</td>
</template>
</v-data-table>
</v-col>
</v-row>
</v-container>
</v-app>
<script src="lib/script.js"></script>
</body>
</html>
new Vue({
el: "#app",
data() {
return {
dialog: false,
isCreate: true,
editedItem: {
id: 0,
name: '',
email: 0
},
headers: [{
text: 'ID',
value: 'id'
}, {
text: '名前',
value: 'name',
}, {
text: 'メルアド',
value: 'email'
}, {
text:'修正/削除',
value:'delete',
sortable:false
}],
serverDatas:[],
}
},
computed: {
formTitle() {
return this.isCreate ? 'New Item' : 'Edit Item'
}
},
watch: {
dialog(val) {
val || this.close()
}
},
methods: {
deleteItem(item) {
const index = this.serverDatas.indexOf(item)
confirm('削除しますか') && this.serverDatas.splice(index, 1)
},
editItem(item) {
this.isCreate = false
this.editedItem = item
this.dialog = true
},
close() {
this.dialog = false
},
save() {
if (!this.isCreate)
{
this.update()
}
else
{
this.create()
}
this.dialog = false
},
update() {
const index = this.serverDatas.indexOf(this.editedItem)
this.serverDatas[index] = this.editedItem
},
create() {
this.serverDatas.push(this.editedItem)
},
},
created() {
axios.get('https://jsonplaceholder.typicode.com/users').then( res => {
this.serverDatas = res.data
}).catch(e => {
alert(e)
}).finally(()=>{
//alert("通信完了")
})
}
})
成果物
以上。