Vue.jsでリストレンダリング内で表示制御をしたい

###前提・実現したいこと
vue.jsでリストレンダリング内で表示制御をしたい。テーブルのインデックス数と同じ要素数の配列を用意し、bool値を入れる。bool値を見て、テーブルの表示/非表示を切り替えたい。例えば、flag[0] == trueの場合は、files[0].nameが非表示になる。描画後、!flag[0]とした場合files[0].nameが表示される。

###発生している問題・エラーメッセージ
テーブル描画後にflagの値を変化させた時、テーブルが再描画されない。

###該当のソースコード

vue.js
1var demo = new Vue({
2    name: 'vue-file',
3    el: '#app',             // 関連付けるDOMを設定する
4    data: {                 // 紐付けるデータを定義
5        'files': [],        // テーブルへ表示するデータ
6        'flag': [],         // ファイル名表示フラグ
7    },

index.html
1<body id="app">
2			<table>
3				<thead>
4					<tr>
5						<th>ファイル名</th>
6                   </tr>
7				</thead>
8				<tbody>
9					<tr v-for='file in files>
10						<td v-if="!flag[$index]"> {{ file.name }}</td>
11                        <td v-else"></td>
12					</tr>
13				</tbody>
14			</table>
15</body>

###試したこと
flagの値はコンソールから変化させました。

そもそもリストレンダリング内で表示制御を行うことは不可能なのでしょうか？

###補足情報(言語/FW/ツール等のバージョンなど)
vue.js 1.0.21

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

回答1件

ベストアンサー

v-bindでいけないでしょうか。

html
1<table id="app">
2  <thead>
3    <tr>
4      <th>ファイル名</th>
5    </tr>
6  </thead>
7  <tbody>
8    <tr v-for='(index) in files'>
9      <td v-bind:class='{none : flag[index]}'> {{ files[index-1] }}</td>
10    </tr>
11  </tbody>
12</table>

javascript
1var demo = new Vue({
2    name: 'vue-file',
3    el: '#app',             // 関連付けるDOMを設定する
4    data: {                 // 紐付けるデータを定義
5        'files': [1,2,3,4,5,6,7,8,9],        // テーブルへ表示するデータ
6        'flag': [true,false,true,false,true,false,true,false,true]         // ファイル名表示フラグ
7    }
8})

css
1.none{display:none;}

投稿2017/02/13 05:16

編集2017/02/13 05:24

Neko_doshi

総合スコア214

Neko_doshi

2017/02/13 05:23

おまけ https://jsfiddle.net/aqfsjuac/1/

kageyama_tanaka

2017/02/13 06:42

ご回答ありがとうございます。すみませんが、もう一点良いでしょうか。上記のjsfddleを参考に、flag[0]の値を反転させるメソッド及びボタンを追加したのですが、この場合、表示はリアルタイムで変化させることは可能でしょうか？ https://jsfiddle.net/aqfsjuac/4/

Neko_doshi

2017/02/13 07:17

data-bindはobjでkey指定しないといけないので // 'flag': [true,false,true,false,true,false,true,false,true] // ファイル名表示フラグ 'flag':[{val:true},{val:false},{val:true},{val:false},{val:true},{val:false},{val:true},{val:false},{val:true}]でいけないでしょうか

Neko_doshi

2017/02/13 07:32

おまけ２ https://jsfiddle.net/aqfsjuac/7/

kageyama_tanaka

2017/02/13 07:55

解決致しました！ > data-bindはobjでkey指定しないといけない大変参考になりました。jsfiddleまで、ありがとうございました。

Neko_doshi

2017/02/13 08:00 編集

最初に私がarrayで書いてしまって混乱させてしまいましたね、すみません。。。 BAありがとうございました。蛇足ですが{{}}ブラケットで囲むよりv-textでバインドしたほうが表示がきれいだと思います。（DOMの書き換えがすくないため）

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