こちらの記事の続編です。 VueとSpringで作成したプロジェクトの構築手順の備忘録。
備忘録のため、詳細な説明を省略している部分があります。 まず最初に main.jsに依存関係を追加します ポイントとなるのはこの部分で、 参考：
vue.jsのcreatedとmountedの違いを目で見て理解 | アールエフェクト 今回はここまでとなります！
お付き合い頂きありがとうございます！
まえがき
目的
前提
環境
やること
実装
npm install axios --save コマンドなどでaxiosをインストールしますimport Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/'
import axios from 'axios'
import vuetify from '@/plugins/vuetify'
Vue.config.productionTip = false
axios.defaults.baseURL = '/api';
// Cookieを有効にする。
axios.defaults.withCredentials = true;
Vue.prototype.$axios = axios;
Vue.use(vuetify)
new Vue({
router,
store,
axios,
vuetify,
render: h => h(App)
}).$mount('#app')
<template>
<div>
<template>
<v-data-table
:headers="headers"
:items="dankaList"
:page.sync="page"
:items-per-page="itemsPerPage"
class="elevation-1"
@page-count="pageCount = $event"
hide-default-footer
>
<template v-slot:[`item.actions`]="{ item }">
<v-icon color="green" class="mr-6" @click="editItem(item)">
mdi-pencil
</v-icon>
<v-icon color="red" @click="deleteItem(item)"> mdi-delete </v-icon>
</template>
<template v-slot:no-data>
<v-btn color="primary" @click="getDanakList()"> Reset </v-btn>
</template>
</v-data-table>
<div class="text-right pt-2">
<v-pagination v-model="page" :length="pageCount"></v-pagination>
<v-text-field
:value="itemsPerPage"
label="Items per page"
type="number"
min="-1"
max="15"
@input="itemsPerPage = parseInt($event, 10)"
></v-text-field>
</div>
</template>
</div>
</template>
<script>
export default {
name: "DankaList",
data: () => ({
dankaList: [],
page: 1,
pageCount: 0,
itemsPerPage: 10,
dialog: false,
dialogDelete: false,
headers: [
{
text: "施主名",
align: "start",
value: "dnkSeshuName",
},
{ text: "戸主名", value: "dnkKoshuName" },
{ text: "戸主名２", value: "dnkKoshuName2" },
{ text: "住所", value: "dnkAddress1" },
{ text: "電話番号", value: "dnkPhonenumber1" },
{ text: "メールアドレス", value: "dnkEmail1" },
{ text: "備考", value: "dnkBikou1" },
{ text: "Actions", value: "actions", sortable: false },
],
editedIndex: -1,
editedItem: {
seshuName: "",
koshuName: "",
koshuName2: "",
address: "",
phonenumber: "",
mailAddress: "",
remark: ""
},
defaultItem: {
seshuName: "",
koshuName: "",
koshuName2: "",
address: "",
phonenumber: "",
mailAddress: "",
remark: ""
},
}),
computed: {
formTitle() {
return this.editedIndex === -1 ? "新規登録" : "編集";
},
},
created() {
this.getDanakList();
},
methods: {
getDanakList() {
const _this = this;
this.$axios.get("/danka").then(response => {
_this.dankaList = response.data;
});
},
created() {
this.getDanakList();
},
methods: {
getDanakList() {
const _this = this;
this.$axios.get("/danka").then(response => {
_this.dankaList = response.data;
});
},
