Vue

by leftstick

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.3.7/index.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <h2>
    {{ testSet }}
  </h2>
  <el-table :data="todos.slice(0, 4)" @select="_select">
    <el-table-column type="selection" width="44">
    </el-table-column>
    <el-table-column 
      label="text"
      prop="text"
    >
    </el-table-column>
  </el-table>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ],
    testSet: ['hello']
  },
  methods: {
  	_select(selection, row) {
    	this.testSet.push(row)
    }
  }
})