JSFiddle - React, Tailwind, and code Playground

by flayshon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="root">
  <h3>Incomplete Tasks</h3>
  <ul>
    <li v-for="task in incompleteTasks">
      <input type="checkbox" v-model="task.completed"> {{ task.description }}
    </li>
  </ul>

  <h3>Completed Tasks</h3>
  <ul>
    <li v-for="task in completedTasks">
      <input type="checkbox" v-model="task.completed"> {{ task.description }}
    </li>
  </ul>
</div>

JavaScript

new Vue({
  el: '#root',

  data: {
    tasks: [{
        description: 'Go to the store',
        completed: true
      },
      {
        description: 'Finish screencast',
        completed: false
      },
      {
        description: 'Make donation',
        completed: false
      },
      {
        description: 'Clear inbox',
        completed: false
      },
      {
        description: 'Make dinner',
        completed: false
      },
      {
        description: 'Clean room',
        completed: true
      },
    ]
  },

  computed: {
    completedTasks() {
      return this.tasks.filter(task => task.completed);
    },

    incompleteTasks() {
      return this.tasks.filter(task => !task.completed);
    },
  },
});