Vue

by Aakash Chakravarthy

HTML

<div id="app">

<ul>
  <li v-for="btn in buttons">{{btn.name}} <a @click="editBtn">Edit</a></li>
</ul>

<edit-btn></edit-btn>

</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

Vue.component('edit-btn', {
	data: function(){
  	return {
    	'name': '',
      'color': 
    };
  },
  props: ['settings'],
  template: `
  	<div>
    	Name: <input v-model="name" />
      color: <input v-model="color" />
    </div>
  `
});

new Vue({
  el: "#app",
  data: {
		buttons: [{name: 'dfsdfsd'}]
  },
  methods: {
			editBtn: function(){
      	alert('sdfdsd');
      }
  }
})