computedプロパティで計算されたtop, leftを再計算する方法はありますか

####　Vue.jsで表示させているデータをセレクトボックスからフィルタリングしたいです。

フィルタリングする前に表示しているデータのうち、画像カラー黄色側にはあらかじめtop, leftが計算されています。
topは初期値から順番にプラスする方法をとっていて、leftはmoment.jsで日づけのパラメータをとって計算しています。
左側のデータがuserData.jsで、右側のデータがtasks.jsです。

[問題の点]

top, leftを計算して表示している配列(task.jsを加工した配列)に対してフィルタリング行ってもtop,leftはそのままであることから、フィルタリングする際に決定しなければならないことがあるのではないかということ。

[フィルタリングの仕組みです]

selectBoxを使用する

selctboxのvディレクティブにはv-modelでfilterOrderをもたせています。
optionにはコンピューテッドプロパティで作成したuserSectionsというグループネームだけの配列をもたせています。
changeイベントでvalueの値を読み取り、filterOrderに代入しています。

このfilterOrderの更新をフラグにしてデータをフィルタリングしようとしています。

フラグによって更新するために元の配列をコンピューテッドで再計算させる

filterOrderの値によって更新を操作するためにnewList配列を作成し、フィルタリングに備えています

右側の実績数を表示させるスタイルをコンピューテッドで作成する(フィルタリング前)

配列のネストが深いのでmap関数を数回使用しています。
スタイルを決定した値をresultに代入しています。その値のtopにプラス20する処理を追加しています。

[問題の処理はこの右側の処理です]

チェーンメソッドで試してみる

この方法であればフィルタリングは動作しますが、top,leftは再計算されません。

チェーンメソッド処理ではなく、top,leftを決定づける際に各グループ用のスタイルを計算する必要があります。
値を返す処理がわかりません。どなたかご教示おねがいいたします。
以下コードです。文字数制限のため全コードをアップできておりません。すいません

javascript
1// userData.js
2export default
3    [
4        { // user_id: 1
5            user_id: 1,
6            order_name: [
7                "AA作業",
8                "BB作業"
9            ],
10            users: {
11                user_id: 1,
12                group_name: "teamA",
13                user_full_name: "DoAsInfinity"
14            },
15            order_code: {
16                user_id: 1,
17                order_code: [
18                    "110",
19                    "111"
20                ]
21            }
22        },
23        { // user_id: 2
24            user_id: 2,
25            order_name: [
26                "AA作業"
27            ],
28            users: {
29                user_id: 2,
30                group_name: "teamA",
31                user_full_name: "ezDoDance"
32            },
33            order_code: {
34                user_id: 2,
35                order_code: [
36                    "110"
37                ]
38            },
39        },
40        { // user_id: 3
41            user_id: 3,
42            order_name: [
43                "BB開発",
44                "CC開発"
45            ],
46            users: {
47                user_id: 3,
48                group_name: "teamB",
49                user_full_name: "GetWild"
50            },
51            order_code: {
52                user_id: 3,
53                order_code: [
54                    "111",
55                    "112"
56                ]
57            }
58        }
59    ]
60

javascript
1// tasks.js
2
3export default
4    [
5        [ // 同一 user_id
6            [ // 同一order_code: 110
7                {
8                    input_time: 4,
9                    count: 1,
10                    user_id: 1,
11                    user_full_name: 'DoAsInfinity',
12                    group_name: "teamA",
13                    order_code: "110",
14                    daily_day: "2021-01-04"
15                },
16                {
17                    input_time: 7,
18                    count: 1,
19                    user_id: 1,
20                    user_full_name: 'DoAsInfinity',
21                    group_name: "teamA",
22                    order_code: "110",
23                    daily_day: "2021-01-15"
24                }
25            ],
26            [ // 同一order_code: 111
27                {
28                    input_time: 1,
29                    count: 1,
30                    user_id: 1,
31                    user_full_name: 'DoAsInfinity',
32                    group_name: "teamA",
33                    order_code: "111",
34                    daily_day: "2021-01-04"
35                },
36                {
37                    input_time: 5,
38                    count: 1,
39                    user_id: 1,
40                    user_full_name: 'DoAsInfinity',
41                    group_name: "teamA",
42                    order_code: "111",
43                    daily_day: "2021-01-05"
44                }
45            ]
46        ],
47        [ // 同一 user_id
48            [ // 同一 order_code
49                {
50                    input_time: 8,
51                    count: 1,
52                    user_id: 2,
53                    user_full_name: "ezDoDance",
54                    group_name: "teamA",
55                    order_code: "110",
56                    daily_day: "2021-01-04"
57                },
58                {
59                    input_time: 8,
60                    count: 1,
61                    user_id: 2,
62                    user_full_name: "ezDoDance",
63                    group_name: "teamA",
64                    order_code: "110",
65                    daily_day: "2021-01-05"
66                },
67                {
68                    input_time: 8,
69                    count: 1,
70                    user_id: 2,
71                    user_full_name: "ezDoDance",
72                    group_name: "teamA",
73                    order_code: "110",
74                    daily_day: "2021-01-06"
75                }
76            ]
77        ],
78        [ // 同一 user_id
79            [ // 同一 order_code
80                {
81                    input_time: 4,
82                    count: 2,
83                    user_id: 3,
84                    user_full_name: "GetWild",
85                    group_name: "teamB",
86                    order_code: "111",
87                    daily_day: "2021-01-04"
88                },
89                {
90                    input_time: 2,
91                    count: 1,
92                    user_id: 3,
93                    user_full_name: "GetWild",
94                    group_name: "teamB",
95                    order_code: "111",
96                    daily_day: "2021-01-07"
97                },
98                {
99                    input_time: 3,
100                    count: 2,
101                    user_id: 3,
102                    user_full_name: "GetWild",
103                    group_name: "teamB",
104                    order_code: "111",
105                    daily_day: "2021-01-13"
106                }
107            ],
108            [
109                {
110                    input_time: 2.5,
111                    count: 2,
112                    user_id: 3,
113                    user_full_name: "GetWild",
114                    group_name: "teamB",
115                    order_code: "112",
116                    daily_day: "2021-01-04"
117                }
118            ]
119        ]
120    ]
121

javascript
1
2<select v-model="filterOrder" name="group_select" id="group_select" @change="filterOrderFunc">
3    <option value="全部表示">
4        全部表示
5    </option>
6    <option :value="group" v-for="(group, index) in userSections" :key="index">
7       {{group}}
8    </option>
9</select><br>
10
11    <div class="task_value" v-for="(users, index) in filteredUserData" :key="index">
12        <div>
13           <div>{{users.user_id}}</div>
14</div>
15<div style="margin-left:100px;">
16  <div>{{users.users.user_full_name}}</div>
17</div>
18<div style="margin-left:50px;">
19  <div>{{users.users.group_name}}</div>
20</div>
21<div style="margin-left:50px;">
22  <div v-for="(order_name, index) in users.order_name" :key="`zero-${index}`" >
23     <div>{{order_name}}</div>
24  </div>
25</div>
26<div style="margin-left:50px;">
27  <div v-for="(order_code, index) in users" :key="`first-${index}`">
28    <div v-for="(code, index) in order_code.order_code" :key="index">
29      <div>{{code}}</div>
30    </div>
31    </div>
32</div>
33
34<div class="lineupNumber_section">
35     <div v-for="(data, index) in lineUpNumbers" :key="index" style="position:relative; background-color: yellow; width:100%;">
36            <div style="position:relative; width: 100%;">
37                 <div v-for="(taskData, index) in data" :key="index" style="position:relative; width: 100%;">
38                       <div v-for="(data, index) in taskData" :key="index" style="position:relative; background-color: yellow; width: 100%; height:100%;">
39                            {{data.style}}: {{data.input_time}}: {{data.item.user_full_name}}: {{data.item.order_code}}
40                            <!-- <div :style="data.style" class="input_time">{{data.input_time}}</div> -->
41                       </div>
42                  </div>
43             </div>
44       </div>
45  </div>
46
47<script>
48import userData from '@/api/userData'
49import tasks from '@/api/tasks'
50import moment from 'moment'
51export default {
52    data() {
53        return {
54            userData,
55            tasks,
56            filterOrder: '',
57            space: 10,
58            month: {
59                start_month: '2021-01-01',
60                end_month: '2021-01-31'
61            }
62        }
63    },
64    methods: {
65        filterOrderFunc(e) {
66            this.filterOrder = e.target.value
67        }
68    },
69    computed: {
70        userSections () {
71            return this.userData.map(value => {
72                return value.users.group_name
73            })
74            .filter((value, index, array) => {
75                return array.indexOf(value) === index
76            })
77        },
78
79    }
80}
81</script>

行動規範の内容に同意します

回答2件

自己解決

処理にあわせて新しい配列を作成(filteredTeamB)し、条件分岐で値を返せないかやってみましたができませんでした。

以下コードです。

javascript
1lineUpNumbers() {
2            let top = 20;
3            let left;
4            let start_date = moment(this.month.start_month).startOf('month')
5            return this.tasks.map(value => {
6                return value.map(value => {
7
8
9                    // TODO:全部表示
10                    const result = value.map(item => {
11
12                        let date_from = moment(item.daily_day)
13                        let start = date_from.diff(start_date, 'days')
14                        left = start * this.space
15                        const input_time = item.input_time
16
17                        const style = {
18                            top: `${top}px`,
19                            left: `${left + 10}px`,
20                        }
21                        return  {
22                            input_time,
23                            style,
24                            item
25                        }
26                    })
27
28
29                    // console.log('value', value)
30
31                    // TODO: teamB
32
33                            const filteredTeamB = value.map(item => {
34
35                            if (item.group_name === 'teamB') {
36                                //console.log('itemB', item.group_name)
37
38                                let date_from = moment(item.daily_day)
39                                let start = date_from.diff(start_date, 'days')
40                                left = start * this.space
41                                const input_time = item.input_time
42
43                                const style = {
44                                    top: `${top}px`,
45                                    left: `${left + 10}px`,
46                                }
47
48                                console.log('teamB-input_time', input_time)
49                                console.log('style', style)
50                                return {
51                                    style,
52                                    input_time,
53                                    item
54                                }
55
56                            }
57                            return filteredTeamB
58                        })
59
60
61                     // TODO: teamA
62                    // if (this.filterOrder === 'teamA') {
63                    //         const filteredTeamB = value.forEach(item => {
64
65                    //         if (item.group_name === 'teamA') {
66                    //             console.log('itemA', item.group_name)
67                    //         }
68
69                    //     })
70                    //     return filteredTeamB
71                    // }
72
73                    if (this.filterOrder === 'teamB') {
74                        top  = top + 20
75                        return filteredTeamB
76                    } else {
77                        top = top + 20
78                        return result
79                    }
80
81                })
82            })
83        }

スタイルがundefinedというエラーです。

filteredTeamB内の処理ではtopの値が更新されませんでした。top = 0と一度初期化することもできましたが、それだと戻り値もtopが0のままです。

forEachだと

javascript
1 const filteredTeamB = value.forEach(item => {
2

forEachで試しましたが、セレクトメニューでteamBを選択すると値をよみこめないようでした。配列として値を返していないからですよね。

[チェーンメソッドからスタイルを更新する方針に切り替えて試してみようかと思います]

方針を変えてみます。

投稿2021/04/09 08:09

3dkoi

総合スコア14

3dkoi

2021/04/13 08:31

Vuexを導入して解決しました。データをstoreに移し、gettersでフィルタリングしました。その際コンポーネントからセレクトボックスの値をなげてその値に一致するデータだけを取得し、そのデータに対してtop, leftの計算をするよう書き換えました。ネストが深いデータのフィルタリングでは空の配列が残ったのでフラットにする処理もしました。

行動規範の内容に同意します

まだ回答にたどり着いていませんが、少し進みました。

resultとして値を返している処理はグループ全体なので、グループ別にfilterをすればよいのですが、fitler関数ではうまくいかなかったのでforEachと条件分岐ですすめてみました。

javascript
1
2        lineUpNumbers() {
3            let top = 20;
4            let left;
5            let start_date = moment(this.month.start_month).startOf('month')
6            return this.tasks.map(value => {
7                return value.map(value => {
8
9
10                    // TODO:全部表示
11                    const result = value.map(item => {
12
13                        let date_from = moment(item.daily_day)
14                        let start = date_from.diff(start_date, 'days')
15                        left = start * this.space
16                        const input_time = item.input_time
17
18                        const style = {
19                            top: `${top}px;`,
20                            left: `${left + 10}px`,
21                        }
22                        return  {
23                            input_time,
24                            style,
25                            item
26                        }
27                    })
28
29
30                    // console.log('value', value)
31
32                    // TODO: teamB
33                    if (this.filterOrder === 'teamB') {
34                            const filteredTeamB = value.forEach(item => {
35
36                            if (item.group_name === 'teamB') {
37                                console.log('itemB', item.group_name)
38                            }
39
40                        })
41                        return filteredTeamB
42                    }
43
44                    if (this.filterOrder === 'teamA') {
45                            const filteredTeamB = value.forEach(item => {
46
47                            if (item.group_name === 'teamA') {
48                                console.log('itemA', item.group_name)
49                            }
50
51                        })
52                        return filteredTeamB
53                    }
54
55
56                    // これよりまえはconsoleでないよ
57                     if (result) {
58                         top = top + 20
59                        return result;
60                    }
61                })
62            })
63        }