JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <div class="wrap">
    <div class="todo-lists">
      <h3>Todo List</h3>
      <ul>
        <li v-for="i in todoLists">
          <label><input v-model="i.isDone" type="checkbox"> {{ i.title }}</label>
        </li>
      </ul>
    </div>

    <div class="done-lists">
      <h3>Done List</h3>
      <ul>
        <li v-for="i in doneLists">
          <label><input v-model="i.isDone" type="checkbox"> {{ i.title }}</label>
        </li>
      </ul>
    </div>
  </div>
</div>

SCSS

#app {
  display: block;
  padding: 1rem;
  font-size: 1rem;
}

h3 {
  margin-bottom: 1rem;
}

.wrap {
  position: relative;
  display: block;
  overflow: hidden;
}

.todo-lists, .done-lists {
  display: block;
  max-width: 150px;
  width: 45%;
  height: 100px;
  margin-right: 4%;
  float: left;
  border: 1px solid #000;
  padding: 1rem;
}

JavaScript

const vm = Vue.createApp({
  data() {
    return {
      lists: [{
          id: 'task001',
          title: '選項 1',
          isDone: false
        },
        {
          id: 'task002',
          title: '選項 2',
          isDone: false
        },
        {
          id: 'task003',
          title: '選項 3',
          isDone: false
        },
      ]
    }
  },
  computed: {
    todoLists() {
      return this.lists.filter(d => !d.isDone)
    },
    doneLists() {
      return this.lists.filter(d => d.isDone)
    },
  }
}).mount('#app');