0

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)

1 ответ 1

0

Цикл нужно было задать так:

<tr v-for="(item, $index) in items">

Ну и маска не работала, пока закомментировал ее.

//        watch:{
//            edit: function(){
//                $('.born').mask("99.99.9999");
//            }
//        },

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.