v-forでのclass付与について(vue.js)

Question

Vue.jsについて質問です。

<li>に対してv-forを使いリストを作りました。 例としまして、 ```vue data:function(){ return{ isActive:1 } } ``` ```html <li v-for="item in itemArray" v-bind:class="{'active':isActive===1}">{{item}}</li> ``` このように記述すると全ての<li>にactiveクラスがついてしまうのですが、 複数生成された最初の<li>にだけclassを付与したいのですがどのように書けば良いでしょうか？

Answer 1

v-forは配列のindexを取得できます。indexが0番目の条件を追加してはいかがでしょうか

    <li v-for="(item, index) in itemArray"
      :class="{'active':index===0 && isActive===1}">{{item}}</li>

Comments

[okpk]

回答ありがとうございます。
無事index値を使って最初の要素にclass付与成功しました。

Answer 2

最初の<li>にだけclassを付与したい

v-for="(item, index) in someArray"というsyntaxで、配列の各要素とともにインデックスが得られます。このインデックスが0であれば...とすればいいと思います。

リストレンダリング - Vue.js

JSFiddle Demo

Comments

[okpk]

回答ありがとうございます。
indexを得られることと　利用することでclassの問題は解決できました。

また追加の質問になり恐縮なのですが、1点疑問点があります。
今回のv-for内に<div v-html="item">という感じで配列にhtml要素を入れており、それを出力していました。その配列内には<p v-on:click="btn">ボタン</p>という要素があるのですが、うまくclickイベントが発火してくれませんでした。

v-htmlで追加したhtmlにv-on:clickのようにクリックイベントを持たすことは可能なのでしょうか...？

[karamarimo]

v-html に対して vue template の syntax を使うことはできません。v-html に指定された expression は単なる html string として扱われます。
v-runtime-template を使えばできるらしいですが、まずそれらを使わずにやる方法を考えたほうがいいと思います。item に入りうる template が component で表現できるなら <component> 要素をつかうのがいいでしょう。
https://jp.vuejs.org/v2/guide/components.html#%E5%8B%95%E7%9A%84%E3%81%AA%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88

本当に"任意の template が item の中に入りうる"というのであれば v-runtime-template のようなものを使わざるを得ないと思います。
これ以上のことははソースを見ないと分からないです。

[karamarimo]

あと、質問として別の話なので、別の質問として投稿したほうがいいと思います。

[okpk]

詳しく回答していただき　ありがとうございました。