Search code examples
vue.jspug

selecting one checkbox selects all of them in table vue


I have front end in jade where I have a table which contains checkboxes. I fetch user data from the database and I display user id and which user needs to be selected with checkboxes in table. Now the problem is selecting one checkbox selects all the checkboxes in the table. The v-model selectedUsers is an array declared in vue data.

            .table-responsive.mt-2
              table.table.table-striped.table-bordered
                thead
                  tr
                    th= u.t("field.include")
                    th= u.t("field.user_id")

                tbody
                  tr(v-for="user in users")
                    td
                      checkbox(
                        :id="user.userId",
                        :value="user",
                        v-model="selectedUsers"
                      )
                    td {{user.userId}}

Solution

  • Try:

    tr(v-for="(user, i) in users")
        td
            checkbox(
                :id="user.userId",
                :value="user",
                 v-model="selectedUsers[i]"
                 )
    

    So at least every checkbox will be liked to diffrent array item. Note that currently the value looks static...