dataに直接jsonを読み込んで、それをcomputedでfilterをつかってデータを絞ればいいと思います。
また、if文で検索を絞るのではなくデータにおいては全てjsonで完結させた方がいいですね。
やってることとしては、jsonをdataに読み込んで、filterで各keyに対応するvalueと選択された値が合わないものを全てfalseにし、配列から除外する。
期間に関しては、データ型を合わせるためにmoment.jsを今回は使ってそろえて大小判定をしてstartより小さくendより大きい値にマッチするものを除外しています。
参考例
json
1{
2 "result": [
3 {
4 "id": "001",
5 "date": "2019-03-11 00:00:00",
6 "anime": "ワンピース",
7 "status": "未視聴"
8 },
9 {
10 "id": "002",
11 "date": "2019-03-10 00:00:00",
12 "anime": "ナルト",
13 "status": "視聴済"
14 },
15 {
16 "id": "003",
17 "date": "2019-03-09 00:00:00",
18 "anime": "銀魂",
19 "status": "保留"
20 }
21 ]
22}
クリックアクションに応じて行うなら
html
1<template>
2 <section>
3 <header class="header">
4 <!-- 録画日時のセレクト-->
5 <div class="input__item">
6 <span>録画日時</span>
7 <div class="date-picker__wrapper">
8 <v-date-picker
9 v-model="formOptions.selectedDate"
10 mode="range"
11 />
12 </div>
13 <button
14 type="button"
15 @click="isSearch"
16 >
17 検索
18 </button>
19 </div>
20 <!-- アニメのセレクト -->
21 <div class="input__item">
22 <label for="anime">アニメ</label>
23 <select id="anime" v-model="formOptions.selectedAnime">
24 <option value="">
25 すべて
26 </option>
27 <option value="ワンピース">
28 ワンピース
29 </option>
30 <option value="ナルト">
31 ナルト
32 </option>
33 <option value="銀魂">
34 銀魂
35 </option>
36 </select>
37 </div>
38
39 <!-- ステータスのセレクト -->
40 <div class="input__item">
41 <label for="status">ステータス</label>
42 <select id="status" v-model="formOptions.selectedStatus">
43 <option value="">
44 すべて
45 </option>
46 <option value="未視聴">
47 未視聴
48 </option>
49 <option value="視聴済">
50 視聴済
51 </option>
52 <option value="保留">
53 保留
54 </option>
55 </select>
56 </div>
57 </header>
58 <!-- 以下にテーブルを表示 -->
59 <div class="table__wrapper">
60 <table class="table">
61 <thead>
62 <tr>
63 <th>ID</th>
64 <th>録画日時</th>
65 <th>アニメ</th>
66 <th>ステータス</th>
67 </tr>
68 </thead>
69 <tbody>
70 <tr
71 v-for="(item, index) in doSearch"
72 :key="index"
73 >
74 <td>{{ item.id }}</td>
75 <td>{{ item.date }}</td>
76 <td>{{ item.anime }}</td>
77 <td>{{ item.status }}</td>
78 </tr>
79 </tbody>
80 </table>
81 </div>
82 </section>
83</template>
84
85<script>
86import sampleJson from '~/static/sample.json'
87import moment from 'moment'
88export default {
89 data() {
90 return {
91 data: sampleJson.result,
92 formOptions: {
93 selectedDate: {
94 start: new Date(),
95 end: new Date()
96 },
97 selectedAnime: '',
98 selectedStatus: ''
99 },
100 anime: '',
101 status: '',
102 start: '',
103 end: ''
104 }
105 },
106 computed: {
107 doSearch() {
108 let list = this.data
109 const anime = this.anime
110 const status = this.status
111 const start = this.start
112 const end = this.end
113 list = list.filter(function (row) {
114 if (anime) {
115 if (row['anime'] !== anime) {
116 return false
117 }
118 }
119 if (status) {
120 if (row['status'] !== status) {
121 return false
122 }
123 }
124 if (start || end) {
125 const time = moment(row['date']).format("YYYY-MM-DD")
126 if (time < start || time > end) {
127 return false
128 }
129 }
130 return row
131 })
132 return list
133 }
134 },
135 methods: {
136 isSearch() {
137 this.anime = this.formOptions.selectedAnime
138 this.status = this.formOptions.selectedStatus
139 const selectedDate = this.formOptions.selectedDate
140 this.start = moment(selectedDate.start).format("YYYY-MM-DD")
141 this.end = moment(selectedDate.end).format("YYYY-MM-DD")
142 }
143 }
144}
145</script>
146
147<style>
148/* スタイルは省略 */
149</style>
150
JSONの値を戻して数字ベースの絞り込み
json
1{
2 "result": [
3 {
4 "id": "001",
5 "date": "2019/03/11 00:00:00",
6 "anime": 1,
7 "status": 1
8 },
9 {
10 "id": "002",
11 "date": "2019/03/10 00:00:00",
12 "anime": 2,
13 "status": 2
14 },
15 {
16 "id": "003",
17 "date": "2019/03/09 00:00:00",
18 "anime": 3,
19 "status": 3
20 }
21 ]
22}
html
1<template>
2 <section>
3 <header class="header">
4 <!-- 録画日時のセレクト-->
5 <div class="input__item">
6 <span>録画日時</span>
7 <div class="date-picker__wrapper">
8 <v-date-picker
9 v-model="formOptions.selectedDate"
10 mode="range"
11 />
12 </div>
13 <button
14 type="button"
15 @click="isSearch"
16 >
17 検索
18 </button>
19 </div>
20 <!-- アニメのセレクト -->
21 <div class="input__item">
22 <label for="anime">アニメ</label>
23 <select id="anime" v-model="formOptions.selectedAnime">
24 <option value="">
25 すべて
26 </option>
27 <option value="1">ワンピース</option>
28 <option value="2">ナルト</option>
29 <option value="3">銀魂</option>
30 </select>
31 </div>
32
33 <!-- ステータスのセレクト -->
34 <div class="input__item">
35 <label for="status">ステータス</label>
36 <select id="status" v-model="formOptions.selectedStatus">
37 <option value="">
38 すべて
39 </option>
40 <option value="1">未視聴</option>
41 <option value="2">視聴済</option>
42 <option value="3">保留</option>
43 </select>
44 </div>
45 </header>
46 <!-- 以下にテーブルを表示 -->
47 <div class="table__wrapper">
48 <table class="table">
49 <thead>
50 <tr>
51 <th>ID</th>
52 <th>録画日時</th>
53 <th>アニメ</th>
54 <th>ステータス</th>
55 </tr>
56 </thead>
57 <tbody>
58 <tr
59 v-for="(item, index) in doSearch"
60 :key="index"
61 >
62 <td>{{ item.id }}</td>
63 <td>{{ item.date }}</td>
64 <td>
65 <span v-if="item.anime === 1">ワンピース</span>
66 <span v-else-if="item.anime === 2">ナルト</span>
67 <span v-else>銀魂</span>
68 </td>
69 <td>
70 <span v-if="item.status == 1">未視聴</span>
71 <span v-else-if="item.status == 2">視聴済</span>
72 <span v-else>保留</span>
73 </td>
74 </tr>
75 </tbody>
76 </table>
77 </div>
78 </section>
79</template>
80
81<script>
82import sampleJson from '~/static/sample.json'
83import moment from 'moment'
84export default {
85 data() {
86 return {
87 data: sampleJson.result,
88 formOptions: {
89 selectedDate: {
90 start: new Date(),
91 end: new Date()
92 },
93 selectedAnime: '',
94 selectedStatus: ''
95 },
96 anime: '',
97 status: '',
98 start: '',
99 end: ''
100 }
101 },
102 computed: {
103 doSearch() {
104 let list = this.data
105 const anime = this.anime
106 const status = this.status
107 const start = this.start
108 const end = this.end
109 list = list.filter(function (row) {
110 if (anime) {
111 if (row['anime'] !== Number(anime)) {
112 return false
113 }
114 }
115 if (status) {
116 if (row['status'] !== Number(status)) {
117 return false
118 }
119 }
120 if (start || end) {
121 const time = moment(row['date']).format("YYYY-MM-DD")
122 if (time < start || time > end) {
123 return false
124 }
125 }
126 return row
127 })
128 return list
129 }
130 },
131 methods: {
132 isSearch() {
133 this.anime = this.formOptions.selectedAnime
134 this.status = this.formOptions.selectedStatus
135 const selectedDate = this.formOptions.selectedDate
136 this.start = moment(selectedDate.start).format("YYYY-MM-DD")
137 this.end = moment(selectedDate.end).format("YYYY-MM-DD")
138 }
139 }
140}
141</script>
142
143<style>
144/* スタイルは省略 */
145</style>
146
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/11 14:08
2019/03/12 01:08
2019/03/12 01:22
2019/03/12 02:52
2019/03/12 03:17 編集
2019/03/12 13:22
2019/03/13 15:05