![\"\"](\"https:\/\/i0.wp.com\/taki-lab.site\/bocci\/wp-content\/uploads\/2019\/12\/Screenshot-from-2019-12-19-09-00-56.png?resize=474%2C247\")
<\/figure>\n\n\n\n\u3053\u306e\u753b\u9762\u3092\u898b\u3066\u3001\u601d\u3063\u305f\u306e\u306f\u3001<\/p>\n\n\n\n
\u3059\u3052\u3047\u7aae\u5c48\u3060\u306a\u3001\u3068\u3002<\/p>\n\n\n\n
\u3053\u306e\u4e00\u89a7\u753b\u9762\u306b\u8868\u793a\u3059\u308b\u306e\u306f\u3001\u7c21\u5358\u306a\u60c5\u5831\u3060\u3051\u306b\u3057\u3066\u3001\u305d\u308c\u4ee5\u5916\u306e\u60c5\u5831\u306f\u3001\u8a73\u7d30\u753b\u9762\u3078\u306e\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3053\u3068\u3067\u8868\u793a\u3055\u305b\u3088\u3046\u3001\u3068\u601d\u3063\u305f\u306e\u3067\u3059\u3002<\/p>\n\n\n\n
\u3084\u306f\u308a\u907f\u3051\u3066\u901a\u308c\u306a\u3044\u3001Vue.js\u306e\u5b9f\u88c5\u3002<\/p>\n\n\n\n
Laravel\u30d7\u30ed\u30b0\u30e9\u30de\u30fc\u306e\u5bbf\u547d\u3002<\/p>\n\n\n\n
\u307e\u305a\u306f\u3001\u90e8\u5c4b\u4e00\u89a7\u3092\u53d6\u5f97\u3059\u308bWebAPI\u3092\u5b9f\u88c5\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u307e\u305a\u306f\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3002<\/p>\n\n\n\n
Route::post('\/api\/rooms', 'ApiController@rooms');\n<\/code><\/pre>\n\n\n\n\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3002<\/p>\n\n\n\n
use Illuminate\\Http\\Request;\nuse App\\Repository\\RoomRepository;\n\nclass ApiController extends Controller\n{\n public function __construct()\n {\n $this->middleware('auth');\n $this->room = new RoomRepository();\n }\n\n public function rooms(Request $request)\n {\n return response()->json(['roomLists' => $this->room->getList()]);\n }\n}\n<\/code><\/pre>\n\n\n\n\u30ea\u30dd\u30b8\u30c8\u30ea\u306f\u65e2\u5b58\u306e\u3082\u306e\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\u9055\u3046\u306e\u306f\u3001\u8fd4\u4fe1\u3059\u308b\u30c7\u30fc\u30bf\u306fJson\u3067\u3042\u308b\u3053\u3068\u3002<\/p>\n\n\n\n
Laravel\u3067\u306f\u4e00\u767a\u3067Json\u306b\u5909\u63db\u3067\u304d\u308b\u3093\u3067\u3059\u306d\u3002\u4fbf\u5229\u3002<\/p>\n\n\n\n
View\u306e\u5b9f\u88c5\u3002<\/p>\n\n\n\n
<detail-component><\/detail-component>\n<\/code><\/pre>\n\n\n\n\u3068\u308a\u3048\u3042\u305a\u3001\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u5b9f\u614b\u306fVue.js\u5074\u306b\u66f8\u304f\u306e\u3067\u3001\u3053\u3053\u3067\u306fVue\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u914d\u7f6e\u3059\u308b\u30bf\u30b0\u3092\u66f8\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\u305d\u3057\u3066\u3001Vue\u306b\u8ffd\u52a0\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u6709\u52b9\u5316\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
Vue.component('detail-component', require('.\/components\/DetailComponent.vue'));\n<\/code><\/pre>\n\n\n\nresource\/assets\/js\/app.js\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u3053\u3046\u3059\u308b\u3053\u3068\u3067\u3001npm run dev\u3067\u8ffd\u52a0\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3082\u30d3\u30eb\u30c9\u306b\u542b\u3081\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
\u3055\u3041\u3001\u3053\u3053\u304b\u3089\u304c\u672c\u756a\u3060\u3002<\/p>\n\n\n\n
\u307e\u305a\u306f\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u90e8\u5206<\/p>\n\n\n\n
<template>\n <div class=\"details\">\n <table>\n <tr>\n <td>\n <select v-model=\"selectYear\">\n <option v-for=\"year in years\" v-bind:value=\"year.value\">{{ year.text }}<\/option>\n <\/select>\n <\/td>\n <td>\u5e74<\/td>\n <td>\n <select v-model=\"selectMonth\">\n <option v-for=\"month in months\" v-bind:value=\"month.value\">{{ month.text }}<\/option>\n <\/select>\n <\/td>\n <td>\u6708<\/td>\n <select v-model=\"selectRoom\">\n <option v-for=\"room in rooms\" v-bind:value=\"room.id\">{{ room.name }}<\/option>\n <\/select>\n <\/td>\n <\/tr>\n <\/table>\n <\/div>\n<\/template>\n<\/code><\/pre>\n\n\n\n\u3068\u308a\u3042\u3048\u305a\u3001\u30d5\u30a3\u30eb\u30bf\u3092\u884c\u3046\u5e74\u6708\u3068\u90e8\u5c4b\u3092\u8868\u793a\u3059\u308b\u5b9f\u88c5\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\u3044\u305a\u308c\u3001\u4e88\u7d04\u4e00\u89a7\u3082\u3053\u306e\u4e2d\u306b\u5165\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
\u307e\u3060\u9014\u4e2d\u306a\u306e\u3067\u3002<\/p>\n\n\n\n
<script>\n export default {\n data() {\n return {\n selectYear: 2019,\n years:[ \n {text:'2019',value:2019},\n {text:'2020',value:2020},\n ],\n selectMonth: 1,\n months:[ \n {text:'1',value:1},\n {text:'2',value:2},\n {text:'3',value:3},\n {text:'4',value:4},\n {text:'5',value:5},\n {text:'6',value:6},\n {text:'7',value:7},\n {text:'8',value:8},\n {text:'9',value:9},\n {text:'10',value:10},\n {text:'11',value:11},\n {text:'12',value:12},\n ],\n selectRoom: 0,\n rooms: [],\n result: [],\n }\n },\n created: function() {\n this.getRooms();\n },\n methods: {\n getRooms: function() {\n var self = this;\n axios.post('\/api\/rooms').then(function(response){\n response.data.roomLists.forEach(element => {\n console.log(element.name)\n self.rooms.push({id:element.id, name:element.name});\n });\n }).catch(function(error){\n console.log(\"\u5931\u6557\u3057\u307e\u3057\u305f\");\n });\n }\n }\n }\n<\/script>\n<\/code><\/pre>\n\n\n\n\u5e74\u6708\u306f\u30d9\u30bf\u66f8\u304d\u3067\u3059\u3002<\/p>\n\n\n\n
\u30ea\u30b9\u30c8\u30c7\u30fc\u30bf\u3092\u5b9a\u7fa9\u3057\u3066\u3001v-for\u3067option\u30bf\u30b0\u306b\u5c55\u958b\u3059\u308b\u4ed5\u7d44\u307f\u3001v-model\u3067\u9078\u629e\u3057\u305f\u5024\u3092\u30d0\u30a4\u30f3\u30c9\u3055\u305b\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\u3053\u306e\u753b\u9762\u304c\u8aad\u307f\u8fbc\u307e\u308c\u305f\u3089\u3001axios\u3092\u4f7f\u3063\u3066Ajax\u3067\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
axios\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u7d44\u307f\u8fbc\u307e\u308c\u3066\u3044\u308b\u307f\u305f\u3044\u3002Ajax\u3092\u884c\u3046\u305f\u3081\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002<\/p>\n\n\n\n
POST\u3067\u6307\u5b9a\u3057\u305fURL\u306b\u9001\u4fe1\u3057\u3001\u6b63\u5e38\u306b\u53d7\u4fe1\u3067\u304d\u308c\u3070then\u306e\u51e6\u7406\u306b\u3001\u4f55\u304b\u3057\u3089\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u305f\u5834\u5408\u306fcatch\u306e\u51e6\u7406\u306b\u79fb\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
this\u3092self\u306b\u8a2d\u5b9a\u3057\u3066\u3044\u308b\u306e\u306f\u3001then\u3084catch\u306e\u4e2d\u3067\u306fthis=Vue\u3067\u306f\u306a\u3044\u306e\u3067\u3001self\u306bVue\u3092\u9000\u907f\u3055\u305b\u3066\u7f6e\u304b\u306a\u3044\u3068\u3001then\/catch\u306e\u4e2d\u3067Vue\u306e\u30c7\u30fc\u30bf\u306b\u30a2\u30af\u30bb\u30b9\u3067\u304d\u306a\u3044\u305f\u3081\u3067\u3059\u3002<\/p>\n\n\n\n
\u3067\u3001then\u306e\u4e2d\u3067\u3001\u30ec\u30b9\u30dd\u30f3\u30b9\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3066\u3001\u30ea\u30b9\u30c8\u5316\u3002<\/p>\n\n\n\n
\u305d\u306e\u30ea\u30b9\u30c8\u3092\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u5074\u3067\u53c2\u7167\u3057\u3066option\u30bf\u30b0\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/taki-lab.site\/bocci\/wp-content\/uploads\/2019\/12\/Screenshot-from-2019-12-21-11-14-00.png?resize=474%2C159\")
<\/figure>\n\n\n\n\u4e0b\u306e\u30d5\u30a3\u30eb\u30bf\u304c\u4eca\u56deVue\u3067\u8868\u793a\u3055\u305b\u305f\u3082\u306e\u3067\u3059\u3002<\/p>\n\n\n\n
\u4e0a\u306e\u90e8\u5206\u306f\u3042\u3068\u3067\u6d88\u3057\u307e\u3059\u3002<\/p>\n\n\n\n![](\"https:\/\/i0.wp.com\/taki-lab.site\/bocci\/wp-content\/uploads\/2019\/12\/03a6eee54039f74ded0b8f7548b1868f.png?w=474\" "\\"\u30d1\u30bd\u30b3\u30f3\u30e9\u30f3\u30ad\u30f3\u30b0\\"")
<\/a>\n","protected":false},"excerpt":{"rendered":"\u6700\u65b0\u30bd\u30fc\u30b9\u306f\u3053\u3061\u3089\u3002 https:\/\/github.com\/takishita2nd\/hotel-mng \u3053\u306e\u753b\u9762\u3092\u898b\u3066\u3001\u601d\u3063\u305f\u306e\u306f\u3001 \u3059\u3052\u3047\u7aae\u5c48\u3060\u306a\u3001\u3068\u3002 \u3053\u306e\u4e00\u89a7\u753b\u9762\u306b\u8868\u793a\u3059\u308b\u306e\u306f\u3001\u7c21\u5358\u306a\u60c5\u5831\u3060\u3051\u306b\u3057\u3066\u3001\u305d\u308c\u4ee5\u5916\u306e\u60c5 … \u7d9a\u304d\u3092\u8aad\u3080 \u3010Laravel\u3011\u3010Vue.js\u3011\u3010\u30db\u30c6\u30eb\u4e88\u7d04\u7ba1\u7406\u3011Vue.js\u3067\u5b9f\u88c5\u3059\u308b<\/span>