HTML код
<div class="container" id="infoUser">
<div class="row">
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th>Наряд</th>
<th>Дата открытия</th>
<th>Дата закрытия</th>
<th>Сумма</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="item in items">
<template v-if="item.status!=='edit'">
<td v-on:click="editItem(item, $index, $event)">{item.name}</td>
<td style="width: 125px" v-on:click="editItem(item, $index, $event)">{item.born}</td>
<td style="width: 125px" v-on:click="editItem(item, $index, $event)">{item.born2}</td>
<td style="width: 125px" v-on:click="editItem(item, $index, $event)">{item.sum}</td>
<td>
<a v-on:click="editItem(item, $index, $event)" href="#" title="редактировать">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
</td>
</template>
<template v-if="item.status=='edit'">
<td><input class="form-control" v-model="edit.name"></td>
<td><input class="born form-control" v-model="edit.born" maxlength="10"></td>
<td><input class="born form-control" v-model="edit.born2" maxlength="10"></td>
<td><input class="born " v-model="edit.sum" maxlength="10"></td>
<td>
<a v-on:click="successEdit(item, $index, $event)" href="#" title="Применить">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</a>
<a v-on:click="cancelEdit(item, $index, $event)" href="#" title="Отмена">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>
</td>
</template>
</tr>
</tbody>
</table>
</div>
</div>
<!--<pre>-->
<!--{ items | json }-->
<!--Редактирование:-->
<!--{ edit | json }-->
<!--</pre>-->
</div>
js
var infoUser = new Vue({
delimiters: ['{', '}'],
el:'#infoUser',
data: {
edit: {},
editIndex: undefined,
items: []
},
mounted:function(){
this.setDefaultItems();
},
watch:{
edit: function(){
$('.born').mask("99.99.9999");
}
},
filters: {
json: function(value) {
return JSON.stringify(value, null, true)
}
},
methods: {
setDefaultItems: function (){
var items = [
{name: '121', born: '16.06.1981', born2: '20.06.1981', sum: '10.00', status:''},
{name: '122', born: '07.05.1992', born2: '25.06.1982', sum: '50.03', status:''},
{name: '123', born: '24.11.1985', born2: '26.06.1983', sum: '10.01', status:''}
];
this.items = items
},
editItem: function(item, index, e){
for(var i = 0, len = this.items.length; i < len ; i++) {
this.items[i].status = '';
}
this.$data.edit = Vue.util.extend({}, item);
this.$data.editIndex = index;
item.status = 'edit';
},
successEdit: function (item, index, e) {
this.$data.items.$set(index, this.$data.edit);
},
cancelEdit: function (item, index, e) {
item.status = '';
}
}
});
Когда срабатывает событие editItem, появляется ошибка:
vue2.js:513 [Vue warn]: Property or method "$index" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in root instance)