前提
Vue.jsでアプリを作成しており,行き詰ったため質問しています.
初めての質問ですので至らぬ点があると思います,指摘していただけたら幸いです.
実現したいこと
納期(order_due_date)と本日の日付を参照し,日付計算を行ってその日数の範囲に応じたCardコンポーネントを完了ボードに表示したい.
該当のソースコード
html
1<template> 2 <SwitchToggle /> 3 <meta name="viewport" content="width=device-width,initial-scale=1" /> 4 <div class="boardArea"> 5 <div class="board red"> 6 <p class="boardText">未完了</p> 7 <div class="cardredArea"> 8 <router-link 9 v-for="data in unfinishedCardDataSort" 10 :key="data" 11 :to="{ name: 'Detail', query: { order: data.order.id } }" 12 > 13 <Card 14 :customer-name="data.customer.name" 15 :order-due-date="data.order.order_due_date" 16 :product-number="data.product.number" 17 :product-name="data.product.name" 18 :product-quantity="data.product.quantity" 19 :process-name="data.process.name" 20 > 21 </Card> 22 </router-link> 23 </div> 24 </div> 25 <div class="board yellow"> 26 <p class="boardText">作業中</p> 27 <div class="cardArea"> 28 <router-link 29 v-for="data in workingCardData" 30 :key="data" 31 :to="{ name: 'Detail', query: { order: data.order.id } }" 32 > 33 <Card 34 :customer-name="data.customer.name" 35 :order-due-date="data.order.order_due_date" 36 :product-number="data.product.number" 37 :product-name="data.product.name" 38 :product-quantity="data.product.quantity" 39 :process-name="data.process.name" 40 > 41 </Card> 42 </router-link> 43 </div> 44 </div> 45 <div class="board green"> 46 <p class="boardText">完了</p> 47 <div class="cardArea"> 48 <router-link 49 v-for="data in completionCardDatafilter" 50 :key="data" 51 :to="{ name: 'Detail', query: { order: data.order.id } }" 52 > 53 <Card 54 :customer-name="data.customer.name" 55 :order-due-date="data.order.order_due_date" 56 :product-number="data.product.number" 57 :product-name="data.product.name" 58 :product-quantity="data.product.quantity" 59 :process-name="data.process.name" 60 > 61 </Card> 62 </router-link> 63 </div> 64 </div> 65 </div> 66</template> 67
javascript
1<script> 2import axios from 'axios' 3import Card from '../components/calendar_1day_card.vue' 4import SwitchToggle from '../components/SwitchToggle.vue' 5import moment from 'moment' 6const dateToday = moment(new Date()).format('yyyy-MM-DD') 7export default { 8 name: 'Kanban', 9 components: { 10 Card, 11 SwitchToggle, 12 }, 13 /** 14 filters: { 15 moment: function (date) { 16 return moment(date).format('yyyy-MM-DD') 17 }, 18 }, 19 */ 20 data() { 21 return { 22 cardData: [], 23 errorMsg: '', 24 unfinishedCardData: [], 25 workingCardData: [], 26 completionCardData: [], 27 } 28 }, 29 computed: { 30 unfinishedCardDataSort() { 31 return this.unfinishedCardData.slice().sort((a, b) => { 32 // 納期が早い順に並び替え 33 if (a.order.order_due_date !== b.order.order_due_date) 34 return a.order.order_due_date < b.order.order_due_date 35 ? -1 36 : a.order.order_due_date > b.order.order_due_date 37 ? 1 38 : 0 39 // 受注番号が小さい順に並び替え 40 if (a.order.id !== b.order.id) return a.order.id - b.order.id 41 // 作業番号が小さい順に並び替え 42 if (a.job_number !== b.job_number) return a.job_number - b.job_number 43 }) 44 }, 45 workingCardDataSort() { 46 return this.workingCardData.slice().sort((a, b) => { 47 // 納期が早い順に並び替え 48 if (a.order.order_due_date !== b.order.order_due_date) 49 return a.order.order_due_date < b.order.order_due_date 50 ? -1 51 : a.order.order_due_date > b.order.order_due_date 52 ? 1 53 : 0 54 // 受注番号が小さい順に並び替え 55 if (a.order.id !== b.order.id) return a.order.id - b.order.id 56 // 作業番号が小さい順に並び替え 57 if (a.job_number !== b.job_number) return a.job_number - b.job_number 58 }) 59 }, 60 completionCardDataSort() { 61 return this.completionCardData.slice().sort((a, b) => { 62 // 納期が早い順に並び替え 63 if (a.order.order_due_date !== b.order.order_due_date) 64 return a.order.order_due_date < b.order.order_due_date 65 ? -1 66 : a.order.order_due_date > b.order.order_due_date 67 ? 1 68 : 0 69 // 受注番号が小さい順に並び替え 70 if (a.order.id !== b.order.id) return a.order.id - b.order.id 71 // 作業番号が小さい順に並び替え 72 if (a.job_number !== b.job_number) return a.job_number - b.job_number 73 }) 74 }, 75 //納期(order_due_date)と操作日の日付を比較して7日以内の配列だけ出力する 76 completionCardDatafilter() { 77 return this.completionCardData.filter((a) => { 78 return moment(a.order.order_due_date).diff(dateToday, 'days') < 7 79 }) 80 }, 81 /** 82 completionCardData: function (order_due_date, today) { 83 return moment(order_due_date).diff(today, 'days') < 7 84 } 85 */ 86 }, 87 created() { 88 axios 89 .get(process.env.VUE_APP_API_SERVER_URL + '/v1/calendar/', { 90 params: { 91 worker: this.$route.query.worker, 92 }, 93 }) 94 .then((response) => { 95 console.log(response.data) 96 this.cardData = response.data 97 this.ArrayFilter() 98 }) 99 .catch((error) => { 100 console.log(error) 101 this.errorMsg = 'Error retrieving data' 102 }) 103 }, 104 methods: { 105 ArrayFilter: function () { 106 this.unfinishedCardData = this.cardData.filter(function (num) { 107 return num.status.id == 1 108 }) 109 this.workingCardData = this.cardData.filter(function (num) { 110 return num.status.id == 2 || num.status.id == 3 111 }) 112 this.completionCardData = this.cardData.filter(function (num) { 113 return num.status.id == 4 114 }) 115 }, 116 }, 117} 118</script> 119
変更,追加したコード
js
1const dateToday = moment(new Date()).format('yyyy-MM-DD') 2 3//納期(order_due_date)と操作日の日付を比較して7日以内の配列だけ出力する 4 completionCardDatafilter() { 5 return this.completionCardData.filter((a) => { 6 return moment(a.order.order_due_date).diff(dateToday, 'days') < 7 7 }) 8 },
試したこと
上記の機能を実装するために,まずはfilterを使って配列から条件に合ったデータを抽出したいと考え,日付を指定し,納期と日付が一致するプログラムを作ろうとしています.
現状,コードを追加してみてエラーは出ていないのですが,指定した日付以外の納期であるカードも表示されている現状でうまく動作しておらず原因もわからないので質問させていただきました.アドバイスをいただけたら幸いです.

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/11/21 11:13
退会済みユーザー
2022/11/21 11:27 編集
2022/11/21 11:46
2022/11/23 19:14
2022/11/26 01:01