Editable component. For example to be used for online-editing within a table.
Setup your project with vue-cli, for example using the webpack template. Add this file to your components folder.
Add the vue-focus component to your project.
npm install vue-focus --save
This is an example setup of a VueJS single file component consisting of a table with editable cells. For styling Bulma and Font Awesome are used.
<template>
<div>
<table class="table is-bordered is-striped is-narrow">
<thead>
<tr>
<th>nl</th>
<th>en</th>
<th> <i class="fa fa-plus fa-lg fa-fw" @click="onAdd"></i> </th>
</tr>
</thead>
<tbody>
<tr v-for="(item, i) of rows">
<td>
<editable :item="item.nl" @updated="onUpdate(i,'nl',$event)"></editable>
</td>
<td>
<editable :item="item.en" @updated="onUpdate(i,'en',$event)"></editable>
</td>
<td> <i class="fa fa-trash-o fa-lg fa-fw" @click="onDelete(i,$event)"></i> </td>
</tr>
</tbody>
</table>
</div>
</template>
<style>
</style>
<script>
import editable from './Editable';
import axios from 'axios';
export default {
data: () => ({
rows: [],
errors: [],
}),
methods: {
onUpdate: function(row, col, newValue) {
console.log('update', row, this.rows[row][col], newValue);
this.rows[row][col] = newValue;
this.updated = true;
// ... implement your update function
// axios.post(url, this.rows[row], config) ...
},
onAdd: function() {
console.log('add');
var newRow = {
nl: '',
en: '',
// ... implement your add function
// axios.post(url, newRow) ...
},
onDelete: function(index, event) {
// ... implement your delete function
},
},
components: {
editable
},
// Fetches rows when the component is created.
created() {
axios.get(...)
.then(response => {
// console.log(response.data);
this.rows = response.data;
})
.catch(e => {
this.errors.push(e)
});
}
}
</script>