Внести правки в таблицу

297
28 марта 2017, 13:08

Всем привет,

Столкнулся с такой проблемой в Vue.js. Есть обычная таблица, данные для которой берутся из API. Пытаюсь сделать Update/Delete отдельно для каждой строки. Удаление работает но, изменения - нет.

Таблица

<div id="d">
    <table class="striped bordered responsive-table">
        <thead>
        <td></td>
        <td>MARK</td>
        <td>YEAR</td>
        <td>Action</td>
        </thead>
        <tbody>
        <tr v-for="(car, index) in cars">
            <td>
                <span v-if="editable_rows[index]==true">[[index+1]]</span>
                <span v-else>[[index+1]] !</span>
            </td>
            <td v-on:dblclick="updateCar(index)">
                <span v-if="editable_rows[index]==true">[[car.car_mark]]</span>
                <span v-else><input type="text" v-model="car.car_mark"></span>
            </td>
            <td v-on:dblclick="updateCar(index)">
                <span v-if="editable_rows[index]==true">[[car.car_year]]</span>
                <span v-else><input type="text" v-model="car.car_year"></span>
            </td>
            <td>
                <i class="material-icons" v-on:click="removeCar([[index]])">delete</i>
                <i class="material-icons" v-on:click="updateCar([[index]])">edit</i>
            </td>
        </tr>
        </tbody>
    </table>

Vue

Vue.options.delimiters = ['[[', ']]'];
Vue.http.headers.common['X-CSRFToken'] = '{{ csrf_token }}';
var app = new Vue({
    el: '#d',
    data: {
        'message': 'Hello Vue!',
        'cars': [],
        'editable_rows': [],
        'seen':true,
        'form_data': {
            car_mark: '',
            car_year: null
        }
    },
    methods: {
        removeCar: function (index) {
            car = this.cars[index];
            this.$http.delete('/api/car/' + car.id).then(function (response) {
                this.cars.splice(index, 1);
            });
        },
        updateCar: function (index) {
            this.editable_rows[index] = !this.editable_rows[index];
            console.log(this.editable_rows);
        }
    },
    mounted: function () {
        this.$http.get('/api/car/').then(function (response) {
            this.cars = response.data.results;
            for (var i = 0; i < this.cars.length; i++) {
                this.editable_rows.push(false);
            }
        });
    }
});
READ ALSO
Не работает e.preventDefault() в Firefox

Не работает e.preventDefault() в Firefox

Пишу проект на Yii2, и делаю одну кнопку, "Оценить", пользователь на нее нажимает, и аяксом данные должны передаться в контроллер и экшн, в опере...

364
Передача файла из input через AJAX

Передача файла из input через AJAX

Пытаюсь передать картинку через AJAXЕсть следующий код:

375
Deffered и delay

Deffered и delay

Всем добрый день, пытаюсь реализовать такую часть кода, нужно чтобы GJ выводилось после задержки в 3500, но почему то не работает, подскажите,...

274
Асинхронная загрузка JQuery?

Асинхронная загрузка JQuery?

Google SpeedTest просит, чтобы не было в коде блокирующего загрузок js, и использовались async и defer

336