質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Q&A

解決済

1回答

1098閲覧

【Vue】datetime型で管理しているデータを日にち、時間別々に表示したい

abrt29

総合スコア12

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

0グッド

0クリップ

投稿2021/06/13 11:00

編集2021/06/14 12:20

簡易的な飲食店予約システムを作成しております。
*前提として
フロントエンド → Vue.cli
バックエンド → Laravel
データーベース → MySQL

*実装したいこと
datetime型で管理しているデータをtemplate内で日にち、時間別々に表示させたい

*現状
① axiosを使用してユーザーの予約情報(bookingsテーブル)を取得している
② ①で取得したデータをV-forにて表示している
③ bookingsテーブルは以下の通りです
bookingsテーブル
カラム名  |  型
id unsigned bigint
user_id unsigned bigint
shop_id unsigned bigint
date_time datetime
user_number int
created_at timestamp
updated_at timestamp

*ご教授いただきたいこと
scriptタグ内の実装したいことができる具体的な記述
可能であれば→ bookingDelete()もうまく動作しないのでそちらもご教授頂けますと幸いです。

以下、該当コードとなります。
お手数おかけいたしますが、よろしくお願い申し上げます。

vue

1<template> 2<div class="mypage"> 3 <commonHeader /> 4 <div class="flex"> 5 <div class="left"> 6 <p class="booking-status">予約状況</p> 7 <div v-for="bookingShop in bookingShops" :key="bookingShop.id"> 8 <div class="booking-info-container"> 9 <div class="flex booking-top"> 10 <p class="booking-number">予約{{bookingShop.id}}</p> 11 <div class="css-cancel" @click="bookingDelete(bookingShop.id)"></div> 12 </div> 13 <div class="booking-info"> 14 <div class="flex"> 15 <p class="name-item">Shop</p> 16 <p class="shop-name content">{{bookingShop.shop.shop_name}}</p> 17 </div> 18 <div class="flex"> 19 <p class="name-item">Date</p> 20 <p class="booking-date content">{{}}</p> 21 </div> 22 <div class="flex"> 23 <p class="name-item">Time</p> 24 <p class="booking-time content">{{}}</p> 25 </div> 26 <div class="flex"> 27 <p class="name-item">Number</p> 28 <p class="number content">{{bookingShop.user_number}}人</p> 29 </div> 30 </div> 31 </div> 32 </div> 33 </div> 34 <div class="right"> 35 <p class="user-name">{{user_name}}さん</p> 36 <p class="like-shop">お気に入り店舗</p> 37 <div class="shops shop-flex"> 38 <div class="shop" v-for="likeShop in likeShops" :key="likeShop.id"> 39 <img :src="likeShop.shop.image_url"> 40 <div class="shop-info"> 41 <p class="shop-name">{{likeShop.shop.shop_name}}</p> 42 <div class="area-genre"> 43 <span class="shop-area">#{{}}</span> 44 <span class="shop-genre">#{{}}</span> 45 </div> 46 <div class="flex"> 47 <button @click="shopDetail(likeShop.shop_id)">詳しく見る</button> 48 <div class="LikesIcon" @click="toggleHeart(shop.id)"> 49 <i class="fa-heart LikesIcon-fa-heart" :class="{ heart: isActive , fas: isActive ,far: !isActive }"></i> 50 </div> 51 </div> 52 </div> 53 </div> 54 </div> 55 </div> 56 </div> 57</div> 58</template> 59 60<script> 61import commonHeader from '../components/commonHeader.vue'; 62import axios from 'axios'; 63export default { 64 data() { 65 return { 66 bookingShops: [], 67 likeShops: [], 68 user_name: '', 69 isActive: true, 70 }; 71 }, 72 components: { 73 commonHeader 74 }, 75 methods: { 76 shopDetail(shop_id) { 77 this.$router.push({path: '/shopdetail/'+ shop_id, params:{shop_id:shop_id}}); 78 }, 79 bookingDelete(index) { 80 axios.delete('http://localhost:8000/api/v1/shops/bookings/' + this.bookingShops[index].id) 81 .then((res) => { 82 console.log(res); 83 }); 84 } 85 }, 86 async created() { 87 const userInfomation = await axios.get( 88 'http://localhost:8000/api/v1/users/' + this.$store.state.id 89 ); 90 // console.log(userInfomation); 91 this.user_name = userInfomation.data.data.user_name; 92 93 const userBookingShops = await axios.get( 94 'http://localhost:8000/api/v1/users/' + this.$store.state.id + '/bookings' 95 ); 96 // console.log(userBookingShops); 97 this.bookingShops = userBookingShops.data.data; 98 console.log(this.bookingShops); 99 100 const userLikeShops = await axios.get( 101 'http://localhost:8000/api/v1/users/' + this.$store.state.id + '/likes' 102 ); 103 // console.log(userLikeShops); 104 this.likeShops = userLikeShops.data.data; 105 // console.log(this.likeShops); 106 } 107} 108</script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

Date()を用いて自己解決

投稿2021/06/17 04:12

abrt29

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問