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]"> |