SpecialistOff.NET / Вопросы / Статьи / Фрагменты кода / Резюме / Метки / Помощь / Файлы
Список вопросов ПечатьМетки: javascript vue.js
Vue 2.6
<section id="app">
<h3>
<div class="btn btn-outline-success btn-sm float-right" v-on:click="addIface"><i class="fa fa-plus"></i> Добавить интерфейс</div>
<a class="btn btn-outline-secondary btn-sm" href="/tools"><i class="fa fa-chevron-left"></i></a> Настройка сетевого интерфейса</h3>
<hr />
<div class="row" v-for="(iface, ifaceIdx) in ifaces">
<div class="col py-2">
<h3>
<div class="btn btn-outline-danger btn-sm" v-on:click="deleteIface(ifaceIdx)"><i class="fa fa-remove"></i></div>
Сетевой интерфейс: <b>{{ iface.name }}</b></h3>
<input type="text" class="form-control" v-model="iface.name">
<h4 class="mt-3">
<div class="btn btn-outline-success btn-sm float-right" v-on:click="addAddress(iface)"><i class="fa fa-plus"></i> Добавить адрес</div>
Адреса <span class="badge badge-primary">{{ iface.addresses.length }}</span></h4>
<div class="form-group" v-for="(address, addressIdx) in iface.addresses">
<div class="input-group">
<input type="text" class="form-control" v-model="address">
<div class="input-group-append">
<div class="btn btn-outline-danger" v-on:click="deleteAddress(iface, addressIdx)"><i class="fa fa-remove"></i></div>
</div>
</div>
</div>
</div>
</div>
<span v-html="ifaces"></span>
</section>
<script>
var app = new Vue({
el: '#app',
data: {
ifaces: [
{name: 'eth0', addresses: ['192.168.0.1/24']}
],
result: ''
},
methods: {
addIface: function() {
var vm = this;
vm.ifaces.push({name: 'eth0', addresses: []});
},
deleteIface: function(ifaceIdx) {
var vm = this;
vm.ifaces.splice(ifaceIdx, 1);
},
addAddress: function(iface) {
var vm = this;
iface.addresses.push('192.168.0.1/24');
},
deleteAddress: function(iface, addressIdx) {
// Косяк при удалении/добавлении адреса
// Сохраняется значение по умолчанию '192.168.0.1/24'
// Хотя данные были изменены
iface.addresses.splice(addressIdx, 1);
}
}
})
</script>
| RemiZOffAlex Создано: 2019-07-15 04:59:27.758667 Обновлено: 2019-07-15 04:59:27.758667 |
|---|
|
Нужно привязывать не переменную из цикла, а элемент по индексу из массива <input type="text" class="form-control" v-model="iface.addresses[addressIdx]"> |