Всем привет,
Столкнулся с такой проблемой в 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);
}
});
}
});
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости