将对象绑定到Vuejs中的复选框值

Question

因此，vuejs中的常规复选框允许您将模型绑定到它。 如果此模型具有预填充复选框的值，则会显示这些特定复选框。

<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>

但是，当您将复选框值绑定到对象时，您不会获得相同的行为。

以下是摘录：

new Vue({
  el: '#app',
  data: {
    users: [{
      "id": "1",
      "name": "Shad Jast",
      "email": "pfeffer.matt@yahoo.com"
    }, {
      "id": "2",
      "name": "Duane Metz",
      "email": "mohammad.ferry@yahoo.com"
    }, {
      "id": "3",
      "name": "Myah Kris",
      "email": "evolkman@hotmail.com"
    }, {
      "id": "4",
      "name": "Dr. Kamron Wunsch",
      "email": "lenora95@leannon.com"
    }, {
      "id": "5",
      "name": "Brendon Rogahn",
      "email": "verlie.buckridge@yahoo.com"
    }],
    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>

Answer 1

我已按以下方式完成，请提出更好的方法，如果有的话：

new Vue({
  el: '#app',
  data: {
    users: [{
      "id": "1",
      "name": "Shad Jast",
      "email": "pfeffer.matt@yahoo.com"
    }, {
      "id": "2",
      "name": "Duane Metz",
      "email": "mohammad.ferry@yahoo.com"
    }, {
      "id": "3",
      "name": "Myah Kris",
      "email": "evolkman@hotmail.com"
    }, {
      "id": "4",
      "name": "Dr. Kamron Wunsch",
      "email": "lenora95@leannon.com"
    }, {
      "id": "5",
      "name": "Brendon Rogahn",
      "email": "verlie.buckridge@yahoo.com"
    }],
    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>