Vue: How to bind checked value from array of objects

Question

For the last 10 hours straight i'm struggling with a seemingly simple issue, i hope someone can assist me.

Situation:

data: {
    user: {
      email: '[email protected]',
      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 }
    ]
  }

However, i can't seem to bind the has_items projectId to the checkbox checked state. I'm pretty confident it's one of those cases where messing around made things worse, and a simple solution is overlooked.

I've added an example fiddle: http://jsfiddle.net/ebzgr4c3/31/

Hope someone can point out the error i made, and make this work :)

Thanks!

Can you explain a little more about what your desired outcome is, or what you mean by binding the projectId to the checkboxes? — zcoop98
– zcoop98, Commented Jul 23, 2020 at 16:19
Yes sure, the desired outcome would be that for every items, a checkbox is created based on the user.has_items values. Meaning, if user.has_items contains projectId: 1, the items with projectId: 1 should be checked (and other way around of course). If there is no user.has_items value, it should be added when checking the checkbox — De ruige
– De ruige, Commented Jul 23, 2020 at 16:23
Why user.has_items objects { "id": 19, "userId": 63, "projectId": 1, "project": { "id": 1, "titel": "Project1" } } have a different format than items { "label": "Project1", "titel": "Project1", "projectId": 1 }, is this part of the requirement? or they must be the same? — Andres Foronda
– Andres Foronda, Commented Jul 23, 2020 at 20:17

zcoop98 · Accepted Answer · 2020-07-23 17:38:18Z

Because the elements in user.has_items have some extra formatting compared to the elements in items, I don't think v-model is really an option here. You'll need space to make some sort of translation from item to has_item happen between the time the checkbox is checked and the time the project is pushed onto the user's array.

You can make that space by trading v-model for a more manual option: events. In my example here, I used the change event to trigger a method that adds or removes the project, based on whether the checkbox is checked or unchecked.

I set the checkbox's initial value with another method. This method checks whether the checkbox's associated project is in the user's array of items.

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

  data: {
    user: {
      email: '[email protected]',
      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>

Collectives™ on Stack Overflow

Vue: How to bind checked value from array of objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related