Vue：如何绑定对象数组中的检查值答案

【问题标题】：Vue: How to bind checked value from array of objectsVue：如何绑定对象数组中的检查值
【发布时间】：2020-11-13 10:24:34
【问题描述】：

在过去的 10 个小时里，我一直在努力解决一个看似简单的问题，希望有人能帮助我。

情况：

data: {
    user: {
      email: 'test@test.com',
      has_items: [ 
      { "id": 19, "userId": 63, "projectId": 1, "project": { "id": 1, "titel": "Project1" } }, 
      { "id": 20, "userId": 63, "projectId": 2, "project": { "id": 2, "titel": "Project2" } } 
      ]
    },
    items: [
      { "label": "Project1", "titel": "Project1", "projectId": 1 },
      { "label": "Project2", "titel": "Project2", "projectId": 2 },
      { "label": "Project3", "titel": "Project3", "projectId": 3 }
    ]
  }

但是，我似乎无法将 has_items projectId 绑定到复选框选中状态。我非常有信心，这是其中一种乱来让事情变得更糟的情况，并且忽略了一个简单的解决方案。

我添加了一个示例小提琴：http://jsfiddle.net/ebzgr4c3/31/

希望有人能指出我犯的错误，并使其工作:)

谢谢！

【问题讨论】：

您能否进一步解释一下您想要的结果是什么，或者将projectId 绑定到复选框是什么意思？
是的，当然，期望的结果是，对于每个items，都会根据user.has_items 的值创建一个复选框。意思是，如果user.has_items 包含projectId: 1，则应该检查items 和projectId: 1（当然还有其他方式）。如果没有user.has_items的值，勾选复选框时应该加上
为什么user.has_items对象{ "id": 19, "userId": 63, "projectId": 1, "project": { "id": 1, "titel": "Project1" } }与项目{ "label": "Project1", "titel": "Project1", "projectId": 1 }的格式不同，这是要求的一部分吗？或者它们必须相同？

标签： javascript vue.js checkbox binding

【解决方案1】：

因为user.has_items 中的元素与items 中的元素相比具有一些额外的格式，所以我认为v-model 在这里并不是一个真正的选择。在选中复选框到将project 推送到用户数组的时间之间，您需要空间来进行从item 到has_item 的某种转换。

您可以通过将 v-model 换成更手动的选项来腾出空间：事件。在我的示例中，我使用change 事件来触发添加或删除项目的方法，具体取决于复选框是选中还是未选中。

我用另一种方法设置了复选框的初始值。此方法检查复选框的关联项目是否在用户的项目数组中。

var demo = new Vue({
  el: '#app',

  data: {
    user: {
      email: 'test@test.com',
      has_items: [ 
      { "id": 19, "userId": 63, "projectId": 1, "project": { "id": 1, "titel": "Project1" } }, 
      { "id": 20, "userId": 63, "projectId": 2, "project": { "id": 2, "titel": "Project2" } } 
      ]
    },
    items: [
      { "label": "Project1", "titel": "Project1", "projectId": 1 },
      { "label": "Project2", "titel": "Project2", "projectId": 2 },
      { "label": "Project3", "titel": "Project3", "projectId": 3 }
    ]
  },
  methods: {
    userHasItem(project) {
      return this.user.has_items.find(e => e.projectId == project.projectId) != undefined;
    },
    updateHasItems(checked, project) {
      if (checked) {
        // Add item to user.has_items
        // [Translation between item and has_item goes here]
        this.user.has_items.push(project); 
      }
      else {
        // Remove item from user.has_items based on ID
        this.user.has_items.splice(this.user.has_items.findIndex(e => e.projectId == project.projectId), 1);
      }
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">

  <div v-for="project in items" :key="project.projectId">
    <label>{{project.titel}}</label>
    <input type="checkbox" :checked="userHasItem(project)" :value="project" @change="updateHasItems($event.target.checked, project)"/>
  </div>
  
  <p>User's items</p>
  {{user.has_items}}
</div>

【讨论】：