"I made a tutorial like a TODO app tutorial with Vue.js and Rails"

This site is used to create a TODO application using rails and vue.js.
While displaying the registered tasks with v-for, we are using v-if to not display already completed tasks, but in the code on the above site An error will occur.

Error message

There are two errors in v-if and v-bind: id.

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'.</Code></pre>
<p><br />
This error occurs when trying to create an id with v-bind.</p>
'v-bind' directives require an attribute value.
Applicable source code
<li v-for = "task in tasks" v-bind: key = "task.id" v-if = "! task.is_done" v-bind: id = "'row_task_' + task .id ">// Error on this line
          <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>

What was originally written on the reference site

<li v-for = "task in tasks" "v-if ="! task.is_done "v-bind: id =" 'row_task_' + task.id ">
          <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>

So I thought that there was no v-bind: key even though there was v-for, so I added it.
The error there was improved, but the remaining two locations were not improved.

I just started Vue.js, so I couldn't solve it myself,

  • Answer # 1

    First about the first error,
    A new array consisting only ofisDoneoffalsefromtasksincomputedas shown below Create using the filter method.

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

    And if you set

    on the template side, only the element whosetask.isDoneisfalseIt will be rendered and there is no need to writev-if.
    computedis recalculated every time the value changes, so changes are reflected without any problems.
    Please refer to the Vue.js Style Guide for details.

    And about the second error,=inv-bind: id = "'row_task_' + task.id"It is.