Vue Playground

Application with Vue.js

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.8.6/vue.min.js"></script>
<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" v-model="user.has_items" :value="project"/>
  </div>
  
  <p>User's items</p>
  {{user.has_items}}
</div>

JavaScript

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 }
    ]
  }
})