Binding object to checkbox value in Vuejs

Question

So normal checkboxes in vuejs allows you to bind a model to it. When this model has the values from checkboxes pre filled, those particular checkboxes appear checked.

<tr v-for="user in users">
  <td>{{ user.name }}</td>
  <td>
    <input type="checkbox" v-model="selectedUsers" v-bind:value="{ id: user.id }">
  </td>
  <td>
    <input type="checkbox" v-model="selectedUsers" value="{{ user.id }}">
  </td>
</tr>

However you don't get the same behaviour when you bind the checkbox value to an object.

Following is the snippet:

new Vue({
  el: '#app',
  data: {
    users: [{
      "id": "1",
      "name": "Shad Jast",
      "email": "[email protected]"
    }, {
      "id": "2",
      "name": "Duane Metz",
      "email": "[email protected]"
    }, {
      "id": "3",
      "name": "Myah Kris",
      "email": "[email protected]"
    }, {
      "id": "4",
      "name": "Dr. Kamron Wunsch",
      "email": "[email protected]"
    }, {
      "id": "5",
      "name": "Brendon Rogahn",
      "email": "[email protected]"
    }],
    selectedUsers: [{
      "id": "1"
    }, "1"]
  }
})

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app">
  <h4>User</h4>
  <div>
    <table>
      <tr>
        <th>Name</th>
        <th></th>
        <th></th>
      </tr>
      <tr v-for="user in users">
        <td>{{ user.name }}</td>
        <td>
          <input type="checkbox" v-model="selectedUsers" v-bind:value="{ id: user.id }">
        </td>
        <td>
          <input type="checkbox" v-model="selectedUsers" value="{{ user.id }}">
        </td>
      </tr>
    </table>
  </div>
  <span>Selected Ids: {{ selectedUsers | json }}</span>
</div>

Deepak · Accepted Answer · 2016-06-08 14:39:52Z

1

I have done it the following way, please suggest better ways, if any:

new Vue({
  el: '#app',
  data: {
    users: [{
      "id": "1",
      "name": "Shad Jast",
      "email": "[email protected]"
    }, {
      "id": "2",
      "name": "Duane Metz",
      "email": "[email protected]"
    }, {
      "id": "3",
      "name": "Myah Kris",
      "email": "[email protected]"
    }, {
      "id": "4",
      "name": "Dr. Kamron Wunsch",
      "email": "[email protected]"
    }, {
      "id": "5",
      "name": "Brendon Rogahn",
      "email": "[email protected]"
    }],
    previousUsers: [{
      "id": "2"
    }, {
      "id": "5"
    }, "1", "5"],
    updatedUsers: []

  },
  methods: {
    check: function(user_id) {
      var checked = false;
      for (i = 0; i < this.previousUsers.length; i++) {
        if (this.previousUsers[i].id == user_id) {
          this.previousUsers.splice(i, 1)
          return true
        }
        return false;
      }
    }
  }
})

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
  <h4>User</h4>
  <div>
    <table>
      <tr>
        <th>Name</th>
        <th></th>
        <th></th>
      </tr>
      <tr v-for="user in users">
        <td>{{ user.name }}</td>
        <td>
          <input type="checkbox" v-model="updatedUsers" v-bind:value="{ id: user.id }" checked="{{check(user.id)}}">
        </td>
        <td>
          <input type="checkbox" v-model="updatedUsers" value="{{ user.id }}">
        </td>
      </tr>
    </table>
  </div>
  <span>Selected Ids: {{ updatedUsers | json }}</span>
</div>

edited Jun 8, 2016 at 14:39

answered Jun 8, 2016 at 7:28

Deepak

1,36212 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

gurghet Over a year ago

What's wrong with your answer. Or what you don't like? More importantly, what is the intended result?

Deepak Over a year ago

I feel the binding should happen naturally as it happens with normal values in model. Why do I have to write a custom function when I am binding an object?

gurghet Over a year ago

Good thing about open source software is that you can improve it. For now, I don't think there is a built-it way to do what you want. Personally I won't add this feature because using an object to collect a selection is not well defined in all contexts. What property would you collect in general? What if the property has a cycle? Do you keep them reactive? In my opinion you need to rethink your architecture, but if you disagree I encourage you to present your pull request to the official repository, I'm sure they will be happy.

Deepak Over a year ago

Well I would only want some consistency here. If its doing it for normal data and not for an object that isn't consistent. And if its not there then it should be specified in their docs somewhere. Have tweeted and also posted in the forum. Lets see whats their take. Thanks anyways! cheers!

Imam Nur Over a year ago

it is only id, what if you want to bind it with name too?

|

Collectives™ on Stack Overflow

Binding object to checkbox value in Vuejs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related