質問編集履歴

4

回答を受けての追加

2018/04/11 05:02

投稿

kazoogon
kazoogon

スコア281

test CHANGED
File without changes
test CHANGED
@@ -261,3 +261,77 @@
261
261
  とそれぞれ変更しましたが、```Uncaught TypeError: Cannot read property 'columns' of undefined```とエラーが出ます。rowsの中にcolumnsというpropertyはあるのに。。。?となっております。
262
262
 
263
263
  度々申し訳ありませんが、よろしくお願いいたします。
264
+
265
+
266
+
267
+ **回答を受けての追加③**
268
+
269
+ ---
270
+
271
+ 回答ありがとうございますeuledgeさん。
272
+
273
+ ご指摘の通りコードを修正すると期待値通り動作しました。
274
+
275
+ しかしコードが長いので変数にデータをいれて使おうと思いこのようにしました(ここではいただいたhttps://jsfiddle.net/3gozgbj9/42/を使用します、そちらの方が分かりやすいと思いますので)
276
+
277
+ ```
278
+
279
+ var date = [
280
+
281
+ {date: '1', message: 'nie można', isActive: true },
282
+
283
+ {date: '2', message: 'nie można', isActive: true },
284
+
285
+ {date: '3', message: 'nie można', isActive: true },
286
+
287
+ {date: '4', message: 'nie można', isActive: true },
288
+
289
+ {date: '5', message: 'nie można', isActive: true },
290
+
291
+ {date: '6', message: 'nie można', isActive: true },
292
+
293
+ {date: '7', message: 'nie można', isActive: true },
294
+
295
+ ]
296
+
297
+ const demo = new Vue({
298
+
299
+ el: '#demo2',
300
+
301
+ data: {
302
+
303
+ rows: [
304
+
305
+ {name: 'item1',
306
+
307
+ columns: date
308
+
309
+ },
310
+
311
+ {name: 'item2',
312
+
313
+ columns: date
314
+
315
+ }
316
+
317
+ ],
318
+
319
+ },
320
+
321
+ methods:{
322
+
323
+ empty:function(rowIndex, colIndex){
324
+
325
+ this.rows[rowIndex].columns[colIndex].isActive = !this.rows[rowIndex].columns[colIndex].isActive;
326
+
327
+ }
328
+
329
+ }
330
+
331
+ });
332
+
333
+ ```
334
+
335
+ このようにすると縦列全部の色が変わってしまいます。変数を使うだけでこのようになる理由が不明で困っております。。
336
+
337
+ 長々申し訳ございませんが、よろしくお願いいたします。

3

回答後の追記②

2018/04/11 05:02

投稿

kazoogon
kazoogon

スコア281

test CHANGED
File without changes
test CHANGED
@@ -179,3 +179,85 @@
179
179
 
180
180
 
181
181
  よろしくお願いいたします。
182
+
183
+
184
+
185
+ **回答を受けての追加②**
186
+
187
+ ---
188
+
189
+ 回答ありがとうございますeuledgeさん。
190
+
191
+ ```
192
+
193
+ v-for='(row,index) in rows'
194
+
195
+ ```についてなんですが、これは
196
+
197
+ ```
198
+
199
+ rows :[
200
+
201
+ {time: '1', message: "9:00-10:00", index: 1},
202
+
203
+ {time: '2', message: "10:00-11:00", index: 2},
204
+
205
+ {time: '3', message: "11:00-12:00", index: 3},
206
+
207
+ {time: '4', message: "12:00-13:00", index: 4},
208
+
209
+ {time: '5', message: "13:00-14:00", index: 5},
210
+
211
+ {time: '6', message: "14:00-15:00", index: 5},
212
+
213
+ {time: '7', message: "15:00-16:00", index: 6},
214
+
215
+ {time: '8', message: "16:00-17:00", index: 7},
216
+
217
+ {time: '9', message: "18:00-19:00", index: 8},
218
+
219
+ {time: '10', message: "19:00-20:00", index: 9},
220
+
221
+ {time: '11', message: "20:00-21:00", index: 10 }
222
+
223
+ ],
224
+
225
+ ```
226
+
227
+ と、indexプロパティが追加されている(?)イメージだと思っております。ですので以下のように変更致しました。
228
+
229
+
230
+
231
+ 「html部分」
232
+
233
+ ```
234
+
235
+ <tr v-for="(row,index) in rows">
236
+
237
+ <th scope="row">@{{ row.message }}</th>
238
+
239
+ <td scope="row" class="hoge" v-for='(column,index) in row.columns' v-bind:class='{ active: column.isActive }' v-on:click='empty(row.index,column.index)'>@{{ column.date }}:@{{ row.time }}</td>
240
+
241
+ </tr>
242
+
243
+ ```
244
+
245
+ 「js method部分」
246
+
247
+ ```
248
+
249
+ methods:{
250
+
251
+ empty:function(row,column){
252
+
253
+ return this.rows[row].columns[column].isActive = ! this.rows[row].columns[column].isActive;
254
+
255
+ }
256
+
257
+ }
258
+
259
+ ```
260
+
261
+ とそれぞれ変更しましたが、```Uncaught TypeError: Cannot read property 'columns' of undefined```とエラーが出ます。rowsの中にcolumnsというpropertyはあるのに。。。?となっております。
262
+
263
+ 度々申し訳ありませんが、よろしくお願いいたします。

2

修正部分の追加

2018/04/10 05:36

投稿

kazoogon
kazoogon

スコア281

test CHANGED
File without changes
test CHANGED
@@ -85,3 +85,97 @@
85
85
 
86
86
 
87
87
  よろしくお願いいたします。
88
+
89
+
90
+
91
+
92
+
93
+ **回答を受けての追加**
94
+
95
+ ---
96
+
97
+ 回答ありがとうございますeuledgeさん。
98
+
99
+ 若干表示側のコードをいじりましたが、現状は1マスクリックするとこのように縦1列全ての色が変わります。
100
+
101
+ ![イメージ説明](1ea92083405c2b3e9d1a4fd785dba623.png)
102
+
103
+ **「試してみたこと」**
104
+
105
+ 下記コードのようにvue.jsで横の時間の情報を持たせ、1マスごとに「1.1」「1.2」と情報を持たす
106
+
107
+ ```
108
+
109
+ const demo = new Vue({
110
+
111
+ el: '#demo2',
112
+
113
+ data: {
114
+
115
+ rows :[
116
+
117
+ {time: '1', message: "9:00-10:00"},
118
+
119
+ {time: '2', message: "10:00-11:00"},
120
+
121
+ {time: '3', message: "11:00-12:00" },
122
+
123
+ {time: '4', message: "12:00-13:00" },
124
+
125
+ {time: '5', message: "13:00-14:00" },
126
+
127
+ {time: '6', message: "14:00-15:00" },
128
+
129
+ {time: '7', message: "15:00-16:00" },
130
+
131
+ {time: '8', message: "16:00-17:00" },
132
+
133
+ {time: '9', message: "18:00-19:00" },
134
+
135
+ {time: '10', message: "19:00-20:00" },
136
+
137
+ {time: '11', message: "20:00-21:00" },
138
+
139
+ ],
140
+
141
+ columns: [
142
+
143
+ {date: '1', message: 'nie można' ,isActive: false},
144
+
145
+ {date: '2', message: 'nie można' ,isActive: false},
146
+
147
+ {date: '3', message: 'nie można' ,isActive: false},
148
+
149
+ {date: '4', message: 'nie można' ,isActive: false},
150
+
151
+ {date: '5', message: 'nie można' ,isActive: false},
152
+
153
+ {date: '6', message: 'nie można' ,isActive: false},
154
+
155
+ {date: '7', message: 'nie można' ,isActive: false},
156
+
157
+ ]
158
+
159
+ },
160
+
161
+ ```
162
+
163
+ ↓表示側のコードはこのように変更。
164
+
165
+ 問題点は```v-on:click='empty(index)'```部分にてcolumn.dateとrow.timeの情報を引数で渡し、その部分だけ色が変わるようにしようと思っていますが、うまいこといかずに困っております。
166
+
167
+ ```
168
+
169
+ <tr v-for="row in rows">
170
+
171
+ <th scope="row">@{{ row.message }}</th>
172
+
173
+ <td scope="row" class="hoge" v-for='(column,index) in columns' v-bind:class='{ active: column.isActive }' v-on:click='empty(index)'>@{{ column.date }}:@{{ row.time }}</td>
174
+
175
+ </tr>
176
+
177
+ ```
178
+
179
+
180
+
181
+ よろしくお願いいたします。

1

題名、タグの修正

2018/04/10 03:25

投稿

kazoogon
kazoogon

スコア281

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- 只今vue.jsを使用し予定表のようなものをtableを使って作成しております。
1
+ 只今Laravel5.5 vue.jsを使用し予定表のようなものをtableを使って作成しております。
2
2
 
3
3
  <期待値>どこかをクリックするとそのマス目だけ色が変わる(もう一度clickすると、色は戻る)
4
4