When you click on the note column all the inputs will appear. I wanted each input to appear when clicked on the corresponding line.
new Vue({
el: '#app',
data: {
nota:'nota',
edit: '',
myclass: 'before',
pincel: 'before',
list: [
{
"id": 0,
"Firstname": "Humberto",
"Lastname": "Lopes",
"Email": "[email protected]",
"Nota": "xxxx"
},
{
"id": 1,
"Firstname": "Luis Humberto",
"Lastname": "Lopes",
"Email": "[email protected]",
"Nota": "xxxx"
},
{
"id": 2,
"Firstname": "Lino",
"Lastname": "Moniz",
"Email": "[email protected]",
"Nota": "xxxx"
},
{
"id": 3,
"Firstname": "Jorge",
"Lastname": "Cabral",
"Email": "[email protected]",
"Nota": "xxxx"
}
],
},
methods: {
whenclick(item) {
console.log(item);
this.edit = true;
},
whenedited(nota) {
this.nota = nota;
this.edit = false;
},
change() {
console.log('rato em cima');
this.myclass = 'after';
this.pincel = 'after';
}
}
})<script src="https://unpkg.com/vue"></script><body><divid="app" class="container">
<div id="title"style="text-align:center;rgb(180, 67, 67);">
<h3>Inline edition </h3>
</div>
<div class="caixa"style="margin:0 auto;">
<!-- <span v-show="!edit" @click="whenclick()" :class="pincel" class="glyphicon glyphicon-pencil" aria-hidden="true"></span> -->
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Apelido</th>
<th>Email</th>
<th>Nota</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in list">
<td>{{item.Firstname}}</td>
<td>{{item.Lastname}}</td>
<td>{{item.Email}}</td>
<td>
<span v-if="!edit" :class="myclass" v-on:mouseover= "change()" @click="whenclick(item)">{{item.Nota}} </span>
<input v-model="item.Nota" v-on:keyup.enter="whenedited(item.Nota)" v-on:blur="whenedited(item.Nota)" v-if="edit" type="text" class="form-control" id="exampleInputName2" placeholder="">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>