Vue.js v-for内で条件の付け方

Question

配列の中から特定の条件に合うhtmlを生成したのですが、
v-forの中でv-ifを用いた検索をすると条件通りの要素は取得し出力されるのですが、配列の数だけhtml自体は生成されてしまうので困っています。どのように書けるのでしょうか。
以下コードになります。

このようなjsonファイルをaxiosを用いて配列store.state.projectsDataに格納しています。

[
    {
        "id": 4,
        "name":"kyoto"
    },
    {
        "id": 3,
        "name":"hiroshima",
    },
    {
        "id": 2,
        "name":"gihu",
    },
    {
        "id": 1,
        "name":"yokohama"
    }
]

userIdはURLのpathに当たります。(http://localhost:3000/projects/kyoto)。**userId**と配列内のnameの一致を見ています。

<div v-for="item in $store.state.projectsData" v-bind:key="item.id">
 <template v-if="item.name === userId">
  {{item}}
 </template>
</div>

結果としては目当てのkyotoの内容が出力されたのですが、検証で見た際に

<div>
 <!---->
</div>

そもそもv-for内で条件分岐するべき出ないと思うのですが、、
このような要素が3つ生成されます。

このままでも問題ないのか。
何か他に書き方があるのか。

よろしくお願いします。

Answer 1

v-ifを外側のdivにつければいいのではないでしょうか。

<div id="app">
  <div 
    v-for="item in $store.state.projectsData"
    v-bind:key="item.id"
    v-if="item.name === userId">
    {{item}}
  </div>  
</div>

JSFiddle Demo

Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    projectsData: [
      {
        id: 4,
        name: 'kyoto',
      },
      {
        id: 3,
        name: 'hiroshima',
      },
      {
        id: 2,
        name: 'gihu',
      },
      {
        id: 1,
        name: 'yokohama',
      },
    ],
  },
})
new Vue({
  el: '#app',
  store,
  data: {
    userId: 'kyoto',
  },
})

Comments

[okpk]

サンプルコードまで添えて回答して頂きありがとうございます。
余計なdivが生成されないで表示できました。
要素検証で見ると、
<div></div>
<!---->
<!---->
<!---->
<!---->
となるのですが、やはりこの<!---->部分はv-forを使う限り残ってしまうので、この部分が気に入らなければ違う方法を考えるしかないかんじでしょうか。(表示上やソース上何も問題はないのですが。)

[karamarimo]

<!----> は単なる html のコメントなので何の問題も無いと思いますよ。気に入らない理由はなんでしょうか？

[okpk]

今後データが100、200件ほどに増えた場合、開発時の要素検証時に膨大なコメントアウトが目に留まる..くらいでしょうか。
気にかけなければ問題無いですね。

回答ありがとうございました。