teratail
回答率
85.48%
質問するログイン新規登録
トップVue.jsに関する質問Vue.js　配列から条件に合ったデータを抽出する方法について

編集履歴

質問編集履歴

5

文章の加筆

2022/11/26 01:00

投稿

sakananati
sakananati

スコア1

test CHANGED
File without changes
test CHANGED
@@ -213,8 +213,6 @@
213
213
  },
214
214
  ```
215
215
 
216
- ###現状のアプリ画面
217
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-21/5f66b663-b4b0-4538-bf4c-d7538766de60.png)
218
216
 
219
217
 
220
218
  ### 試したこと
Vue.jsJavaScriptHTML

4

文章の変更

2022/11/23 19:17

投稿

sakananati
sakananati

スコア1

test CHANGED
File without changes
test CHANGED
@@ -60,7 +60,7 @@
60
60
  <p class="boardText">完了</p>
61
61
  <div class="cardArea">
62
62
  <router-link
63
- v-for="data in completionCardData"
63
+ v-for="data in completionCardDatafilter"
64
64
  :key="data"
65
65
  :to="{ name: 'Detail', query: { order: data.order.id } }"
66
66
  >
@@ -86,18 +86,20 @@
86
86
  import Card from '../components/calendar_1day_card.vue'
87
87
  import SwitchToggle from '../components/SwitchToggle.vue'
88
88
  import moment from 'moment'
89
-
89
+ const dateToday = moment(new Date()).format('yyyy-MM-DD')
90
90
  export default {
91
91
  name: 'Kanban',
92
92
  components: {
93
93
  Card,
94
94
  SwitchToggle,
95
95
  },
96
+ /**
96
97
  filters: {
97
98
  moment: function (date) {
98
- return moment(date).format('YY/MM/DD HH:mm')
99
+ return moment(date).format('yyyy-MM-DD')
99
- },
100
+ },
100
- },
101
+ },
102
+ */
101
103
  data() {
102
104
  return {
103
105
  cardData: [],
@@ -105,7 +107,6 @@
105
107
  unfinishedCardData: [],
106
108
  workingCardData: [],
107
109
  completionCardData: [],
108
- dateToday: '',
109
110
  }
110
111
  },
111
112
  computed: {
@@ -154,10 +155,10 @@
154
155
  if (a.job_number !== b.job_number) return a.job_number - b.job_number
155
156
  })
156
157
  },
157
- //納期（order_due_tate）が'2021-01-22'の配列だけ出力する
158
+ //納期（order_due_date）と操作日の日付を比較して7日以内の配列だけ出力する
158
159
  completionCardDatafilter() {
159
160
  return this.completionCardData.filter((a) => {
160
- a.order.order_due_date === '2021-01-22'
161
+ return moment(a.order.order_due_date).diff(dateToday, 'days') < 7
161
162
  })
162
163
  },
163
164
  /**
@@ -183,9 +184,6 @@
183
184
  this.errorMsg = 'Error retrieving data'
184
185
  })
185
186
  },
186
- mounted() {
187
- this.dateToday = moment(new Date()).format('YYYY/MM/DD')
188
- },
189
187
  methods: {
190
188
  ArrayFilter: function () {
191
189
  this.unfinishedCardData = this.cardData.filter(function (num) {
@@ -198,18 +196,6 @@
198
196
  return num.status.id == 4
199
197
  })
200
198
  },
201
- /**
202
- diffDate: function (order_due_date, today) {
203
- return moment(order_due_date).diff(today, 'days')
204
- },
205
-
206
- // 日付の差分でtrueを返す
207
- diffDateJudge: function (order_due_date, today) {
208
- if (moment(order_due_date).diff(today, 'days') < 7) {
209
- return order_due_date
210
- }
211
- },
212
- */
213
199
  },
214
200
  }
215
201
  </script>
Vue.jsJavaScriptHTML

3

文章の加筆

2022/11/23 19:09

投稿

sakananati
sakananati

スコア1

test CHANGED
File without changes
test CHANGED
@@ -215,14 +215,22 @@
215
215
  </script>
216
216
 
217
217
  ```
218
+ 変更，追加したコード
219
+ ```js
220
+ const dateToday = moment(new Date()).format('yyyy-MM-DD')
221
+
222
+ //納期（order_due_date）と操作日の日付を比較して7日以内の配列だけ出力する
223
+ completionCardDatafilter() {
224
+ return this.completionCardData.filter((a) => {
225
+ return moment(a.order.order_due_date).diff(dateToday, 'days') < 7
226
+ })
227
+ },
228
+ ```
218
229
 
219
230
  ###現状のアプリ画面
220
231
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-21/5f66b663-b4b0-4538-bf4c-d7538766de60.png)
221
232
 
222
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-21/c42777fd-5c58-40aa-a51d-874fe8999cbf.png)
233
+
223
-
224
- APIの一例
225
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-21/739fba86-1369-45af-a31f-30527513bcb8.png)
226
234
  ### 試したこと
227
235
  上記の機能を実装するために，まずはfilterを使って配列から条件に合ったデータを抽出したいと考え，日付を指定し，納期と日付が一致するプログラムを作ろうとしています．
228
236
  現状，コードを追加してみてエラーは出ていないのですが，指定した日付以外の納期であるカードも表示されている現状でうまく動作しておらず原因もわからないので質問させていただきました．アドバイスをいただけたら幸いです．
Vue.jsJavaScriptHTML

2

文章の加筆

2022/11/21 11:47

投稿

sakananati
sakananati

スコア1

test CHANGED
File without changes
test CHANGED
@@ -220,6 +220,9 @@
220
220
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-21/5f66b663-b4b0-4538-bf4c-d7538766de60.png)
221
221
 
222
222
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-21/c42777fd-5c58-40aa-a51d-874fe8999cbf.png)
223
+
224
+ APIの一例
225
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-21/739fba86-1369-45af-a31f-30527513bcb8.png)
223
226
  ### 試したこと
224
227
  上記の機能を実装するために，まずはfilterを使って配列から条件に合ったデータを抽出したいと考え，日付を指定し，納期と日付が一致するプログラムを作ろうとしています．
225
228
  現状，コードを追加してみてエラーは出ていないのですが，指定した日付以外の納期であるカードも表示されている現状でうまく動作しておらず原因もわからないので質問させていただきました．アドバイスをいただけたら幸いです．
Vue.jsJavaScriptHTML

1

文章の更新

2022/11/21 11:14

投稿

sakananati
sakananati

スコア1

test CHANGED
File without changes
test CHANGED
@@ -218,6 +218,8 @@
218
218
 
219
219
  ###現状のアプリ画面
220
220
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-21/5f66b663-b4b0-4538-bf4c-d7538766de60.png)
221
+
222
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-21/c42777fd-5c58-40aa-a51d-874fe8999cbf.png)
221
223
  ### 試したこと
222
224
  上記の機能を実装するために，まずはfilterを使って配列から条件に合ったデータを抽出したいと考え，日付を指定し，納期と日付が一致するプログラムを作ろうとしています．
223
225
  現状，コードを追加してみてエラーは出ていないのですが，指定した日付以外の納期であるカードも表示されている現状でうまく動作しておらず原因もわからないので質問させていただきました．アドバイスをいただけたら幸いです．
Vue.jsJavaScriptHTML