Vue

by ChangJoo Park

HTML

<div id="app">
  <aside>
    <ul>
      <li v-if="isNewList">
        <input type="text" v-model.trim="newListName" ref="newListForm">
        <button @click="onSave()">O</button>
        <button @click="onCancel()">X</button>
      </li>
      <li v-else @click="openNewListForm()">New List</li>
      <li v-for="(item, index) in list">{{ item }}</li>
    </ul>
  </aside>
  <main>
    <h1>Hello World</h1>
  </main>
</div>

CSS

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

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

#app aside {
  flex: 1;
  border-right: 1px solid black;
  padding: 10px;
}

#app main {
  flex: 3;
  padding: 10px;
}

Vue

new Vue({
  el: "#app",
  data: function () {
  	return {
    	isNewList: false,
    	newListName: '',
      list: []
		}
  },
  methods: {
  	openNewListForm () {
    	this.isNewList = true
      console.log(this.$refs)
    	if(this.$refs['newListForm']) {
      	this.$refs['newListForm'].focus()
			}
    },
  	doneNewListForm () {
    	this.isNewList = false
      this.newListName = ''
    },
  	onSave () {
    	if (this.newListName === '') {
      	return
			}
    	this.list.push(this.newListName)
      this.doneNewListForm()
    },
    onCancel () { this.doneNewListForm() }
	}
})