Q&A
「return this.isActive = true」を「return this.isActive = !this.isActive」に書き換えた場合に動作に変化は見られますか?
只今Laravel5.5 vue.jsを使用し予定表のようなものをtableを使って作成しております。
<期待値>どこかをクリックするとそのマス目だけ色が変わる(もう一度clickすると、色は戻る)
「html側、table.tbodyのコード」
<tobody> @foreach ($master_reservation_times as $master_reservation_time) <tr> <th scope="row">{{ $master_reservation_time->time }}</th> <td scope="row" class="hoge" v-for='(item,index) in items' v-bind:class='{ active: isActive }' v-on:click='empty(index)'>@{{item.date}}</td> </tr> @endforeach </tobody>
「js側」
const demo = new Vue({ el: '#demo2', data: { isActive: false, items: [ {date: '1', message: 'nie można' }, {date: '2', message: 'nie można' }, {date: '3', message: 'nie można' }, {date: '4', message: 'nie można' }, {date: '5', message: 'nie można' }, {date: '6', message: 'nie można' }, {date: '7', message: 'nie można' }, ] }, methods:{ empty:function(index){ return this.isActive = true; //ここでどのようにindexをもたせればよいか？？ } } });
ここまではできるのですが、indexをどうfunctionの中で持たせれば良いかわからずに困っております。(現状ではマス目が全部変わり、もう一度clickしても元には戻りません)
またv-on:click='isActive=!isActive'とすればclick二回目で元に戻りますが、これだとindexの値を渡ないというか、methodが使えない(?)のでマス目を指定してなにか変化させることができません。
よろしくお願いいたします。
回答を受けての追加
回答ありがとうございますeuledgeさん。
若干表示側のコードをいじりましたが、現状は１マスクリックするとこのように縦１列全ての色が変わります。
「試してみたこと」
下記コードのようにvue.jsで横の時間の情報を持たせ、１マスごとに「1.1」「1.2」と情報を持たす
const demo = new Vue({ el: '#demo2', data: { rows :[ {time: '1', message: "9:00-10:00"}, {time: '2', message: "10:00-11:00"}, {time: '3', message: "11:00-12:00" }, {time: '4', message: "12:00-13:00" }, {time: '5', message: "13:00-14:00" }, {time: '6', message: "14:00-15:00" }, {time: '7', message: "15:00-16:00" }, {time: '8', message: "16:00-17:00" }, {time: '9', message: "18:00-19:00" }, {time: '10', message: "19:00-20:00" }, {time: '11', message: "20:00-21:00" }, ], columns: [ {date: '1', message: 'nie można' ,isActive: false}, {date: '2', message: 'nie można' ,isActive: false}, {date: '3', message: 'nie można' ,isActive: false}, {date: '4', message: 'nie można' ,isActive: false}, {date: '5', message: 'nie można' ,isActive: false}, {date: '6', message: 'nie można' ,isActive: false}, {date: '7', message: 'nie można' ,isActive: false}, ] },
↓表示側のコードはこのように変更。
問題点はv-on:click='empty(index)'部分にてcolumn.dateとrow.timeの情報を引数で渡し、その部分だけ色が変わるようにしようと思っていますが、うまいこといかずに困っております。
<tr v-for="row in rows"> <th scope="row">@{{ row.message }}</th> <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> </tr>
よろしくお願いいたします。
回答を受けての追加②
回答ありがとうございますeuledgeさん。
v-for='(row,index) in rows' ```についてなんですが、これは
rows :[
{time: '1', message: "9:00-10:00", index: 1},
{time: '2', message: "10:00-11:00", index: 2},
{time: '3', message: "11:00-12:00", index: 3},
{time: '4', message: "12:00-13:00", index: 4},
{time: '5', message: "13:00-14:00", index: 5},
{time: '6', message: "14:00-15:00", index: 5},
{time: '7', message: "15:00-16:00", index: 6},
{time: '8', message: "16:00-17:00", index: 7},
{time: '9', message: "18:00-19:00", index: 8},
{time: '10', message: "19:00-20:00", index: 9},
{time: '11', message: "20:00-21:00", index: 10 }
],
<tr v-for="(row,index) in rows"> <th scope="row">@{{ row.message }}</th> <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> </tr> ``` 「js method部分」 ``` methods:{ empty:function(row,column){ return this.rows[row].columns[column].isActive = ! this.rows[row].columns[column].isActive; } } ``` とそれぞれ変更しましたが、```Uncaught TypeError: Cannot read property 'columns' of undefined```とエラーが出ます。rowsの中にcolumnsというpropertyはあるのに。。。？となっております。 度々申し訳ありませんが、よろしくお願いいたします。と、indexプロパティが追加されている(?)イメージだと思っております。ですので以下のように変更致しました。 「html部分」
回答を受けての追加③
回答ありがとうございますeuledgeさん。
ご指摘の通りコードを修正すると期待値通り動作しました。
しかしコードが長いので変数にデータをいれて使おうと思いこのようにしました(ここではいただいたhttps://jsfiddle.net/3gozgbj9/42/を使用します、そちらの方が分かりやすいと思いますので)
var date = [ {date: '1', message: 'nie można', isActive: true }, {date: '2', message: 'nie można', isActive: true }, {date: '3', message: 'nie można', isActive: true }, {date: '4', message: 'nie można', isActive: true }, {date: '5', message: 'nie można', isActive: true }, {date: '6', message: 'nie można', isActive: true }, {date: '7', message: 'nie można', isActive: true }, ] const demo = new Vue({ el: '#demo2', data: { rows: [ {name: 'item1', columns: date }, {name: 'item2', columns: date } ], }, methods:{ empty:function(rowIndex, colIndex){ this.rows[rowIndex].columns[colIndex].isActive = !this.rows[rowIndex].columns[colIndex].isActive; } } });
このようにすると縦列全部の色が変わってしまいます。変数を使うだけでこのようになる理由が不明で困っております。。
長々申し訳ございませんが、よろしくお願いいたします。
回答ありがとうございます。 ご指摘の通り修正しましたところ、click二回目で色は元に戻りました、ありがとうございます。 後はclickしたマス目の部分だけの色が変化すればよいですが、、indexをどう扱えばいいのかわからなくて困っております
「method が使えない」とはどのような意味でしょうか、たとえば 次のような構造に書き換えれば解決しますか？: http://gouf.hatenablog.com/entry/2018/04/09/011338
回答4件
0
ベストアンサー
同じ変数 dateを使用していますが、この場合両方とも同じものをさしています(var date で宣言したもの) これはjavascriptの言語的仕様です。したがって片方の値を変えたつもりでも両方の値が変わったようになります。
js
1 rows: [ 2 {name: 'item1', 3 columns: date 4 }, 5 {name: 'item2', 6 columns: date 7 }
投稿2018/04/11 07:43
総合スコア2404
0
まず、誤解されているようなので訂正させていただきます。
indexプロパティが追加されている(?)イメージだと思っております
ですが、indexは v-forの構文の中で配列のインデクスとしてサポートされているものなのでオブジェクトにindexというプロパティを用意する必要はありません。
html
1<td v-for="(row,index) in rows"> 2 <td>{{index}}</td> 3 <td>{{row.name}}</td> 4</td>
Vue.js ガイドより
v-for で配列に要素をマッピングする
となると、rowとcolumnで同じ名前のindexは使用できないので名前は分けましょう。
rowIndex, colIndex とか
(indexという名前がインデクスを表すのではなく第2引数がインデクスになります）
https://jsfiddle.net/euledge/3gozgbj9/25/
クラスのOn/Offだけなら、ふとisActiveもindexもいらないんじゃねと思いました。
isActive,indexを使用しないバージョンも下記に載せておきます
https://jsfiddle.net/euledge/3gozgbj9/38/
ただし、クリックされているかどうかをデータとして残す必要がある場合は isActiveは必要になりますので上のパターンで行う必要があります。
Vue.js ガイドより
メソッドイベントハンドラ
遠回りさせてしまいすみません。
投稿2018/04/10 12:55
編集2018/04/10 13:00総合スコア2404
0
js
1 rows :[ 2 {time: '1', message: "9:00-10:00"}, 3 {time: '2', message: "10:00-11:00"}, 4 {time: '3', message: "11:00-12:00" }, 5 {time: '4', message: "12:00-13:00" }, 6 {time: '5', message: "13:00-14:00" }, 7 {time: '6', message: "14:00-15:00" }, 8 {time: '7', message: "15:00-16:00" }, 9 {time: '8', message: "16:00-17:00" }, 10 {time: '9', message: "18:00-19:00" }, 11 {time: '10', message: "19:00-20:00" }, 12 {time: '11', message: "20:00-21:00" }, 13 ], 14 columns: [ 15 {date: '1', message: 'nie można' ,isActive: false}, 16 {date: '2', message: 'nie można' ,isActive: false}, 17 {date: '3', message: 'nie można' ,isActive: false}, 18 {date: '4', message: 'nie można' ,isActive: false}, 19 {date: '5', message: 'nie można' ,isActive: false}, 20 {date: '6', message: 'nie można' ,isActive: false}, 21 {date: '7', message: 'nie można' ,isActive: false}, 22 ]
ではそうなっちゃいますね。
js
1rows :[ 2 {time: '1', message: "9:00-10:00", 3 columns: [ 4 {date: '1', message: 'nie można' ,isActive: false}, 5 {date: '2', message: 'nie można' ,isActive: false}, 6 {date: '3', message: 'nie można' ,isActive: false}, 7 {date: '4', message: 'nie można' ,isActive: false}, 8 {date: '5', message: 'nie można' ,isActive: false}, 9 {date: '6', message: 'nie można' ,isActive: false}, 10 {date: '7', message: 'nie można' ,isActive: false}, 11 ]}, 12 {time: '2', message: "10:00-11:00", 13 columns: [ 14 {date: '1', message: 'nie można' ,isActive: false}, 15 {date: '2', message: 'nie można' ,isActive: false}, 16 {date: '3', message: 'nie można' ,isActive: false}, 17 {date: '4', message: 'nie można' ,isActive: false}, 18 {date: '5', message: 'nie można' ,isActive: false}, 19 {date: '6', message: 'nie można' ,isActive: false}, 20 {date: '7', message: 'nie można' ,isActive: false}, 21 ]}, 22 以下略 23 ], 24]
テーブルの構造どおり上記のようにしないと1マスづつにはならないです
説明省いちゃってますけど、methodで渡す値も rowのindexと columnのindexが必要です。
投稿2018/04/10 03:41
編集2018/04/10 04:16総合スコア2404
0
状態としてisActiveがあるのですが、それを td 毎に持っていないので個別の動作ができないのではないでしょうか？
したがって、各itemにisActiveを持てば解決するのではないかと思います。
js
1const demo = new Vue({ 2 el: '#demo2', 3 data: { 4 items: [ 5 {date: '1', message: 'nie można', isActive: true }, 6 {date: '2', message: 'nie można', isActive: true }, 7 {date: '3', message: 'nie można', isActive: true }, 8 {date: '4', message: 'nie można', isActive: true }, 9 {date: '5', message: 'nie można', isActive: true }, 10 {date: '6', message: 'nie można', isActive: true }, 11 {date: '7', message: 'nie można', isActive: true }, 12 ] 13 }, 14 methods:{ 15 empty:function(index){ 16 this.items[index].isActive = ! this.items[index].isActive; 17 } 18 } 19});
下記に動くサンプルを置きます
投稿2018/04/09 08:05
総合スコア2404
あなたの回答
tips
プレビュー
