JSFiddle - React, Tailwind, and code Playground
HTML
<template id="component">
<div>
<div v-for="item in items">
<el-button @click="deleteItem(item)">Delete</el-button>
<el-button @click="saveItem(item)">Save</el-button>
</div>
</div>
</template>
<div id="app">
<component :items="items"></component>
</div>
JavaScript
Vue.component('el-button', {
template: '<button @click="$emit(\'click\')"><slot></slot></button>'
});
Vue.component('component', {
template: '#component',
props: ['items'],
methods: {
deleteItem: function (item) {
console.log('Doing more', item);
// Do ajax here
this.otherMethod();
},
otherMethod: function() {
console.log('Hello there');
}
}
});
new Vue({
data: {
items: [1, 2, 3, 4, 5],
},
}).$mount('#app')