v-forとv-ifを使って条件に当てはまるものだけ表示させる方法

Question

前提・実現したいこと

『Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた』
https://qiita.com/naoki85/items/51a8b0f2cbf949d08b11

このサイトを参考にrailsとvue.jsを使ってTODOアプリを作成しています。
登録されているタスクをv-forで表示していく中で、すでに完了しているタスクは表示させない、というのをv-ifを使ってやっているのですが、上記のサイトにあるコードではエラーになってしまいます。

発生している問題・エラーメッセージ

v-ifとv-bind:idの２箇所でエラーが出ています。

[vue/no-use-v-if-with-v-for]
The 'tasks' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.

こちらのエラーはv-bindでidを作ろうとしている部分でエラーが出ます。

[vue/valid-v-bind]
'v-bind' directives require an attribute value.

該当のソースコード

<li v-for="task in tasks" v-bind:key="task.id" v-if="!task.is_done" v-bind:id＝"'row_task_' + task.id" class="collection-item">//この行でエラー
          <input type="checkbox" v-on:change="doneTask(task.id)" v-bind:id="'task_' + task.id" />
          <label v-bind:for="'task_' + task.id">{{ task.name }}</label>
</li>

試したこと

もともと参考にしたサイトに書いてあったのは

<li v-for="task in tasks"　" v-if="!task.is_done" v-bind:id＝"'row_task_' + task.id" class="collection-item">
          <input type="checkbox" v-on:change="doneTask(task.id)" v-bind:id="'task_' + task.id" />
          <label v-bind:for="'task_' + task.id">{{ task.name }}</label>
</li>

だったので、v-forがあるのにv-bind:keyがない、と思ったので付け足しました。
そこのエラーは改善されましたが残りの２箇所は改善されませんでした。

Vue.jsを始めたばかりなので自分で解決することができませんでした、、、
よろしくお願いします。

Answer 1

まず1つ目のエラーについてですが、
以下のようにcomputedに配列tasksの中からisDoneがfalseのもののみから成る新しい配列をfilterメソッドを使って作ります。

computed: {
  filteredTasks() {
    return this.tasks.filter(task => !task.isDone)
  }
}

そしてテンプレート側で<li v-for="task in filteredTasks"～とすれば、task.isDoneがfalseの要素のみがレンダリングされるようになり、v-ifを記述する必要はなくなります。
computedは値が変わるたびに再計算されるので、変更も問題なく反映されます。
詳しくはVue.jsスタイルガイドを参照して下さい。

そして2つ目のエラーについてですが、v-bind:id="'row_task_' + task.id"の部分の=が全角になっています。

Comments

[hana00033]

computedを使えばいいんですね...！すごく勉強になりました！
全角、全然気付きませんでした...ご丁寧にありがとうございました！