<div id="app">
<div class="vpn-path-configure">
<form>
<div class="form-group" v-for="(path, index) in pathElements" :key="'server-' + index">
<label :for="'server-' + index" :key="'label-' + index">Сервер #{{ index + 1 }}</label>
<select class="form-control" :id="'server-' + index" v-on:change="changeServer(index, $event)" :key="'select-' + index">
<option v-for="(server, server_index) in path.servers" :key="'option-' + index + '-' + server_index" :value="server_index">{{ server.ip + ':' + server.port }}</option>
</select>
</div>
<button class="btn btn-primary">Создать</button>
</form>
</div>
</div>
new Vue({
el: '#app',
data() {
const servers = [];
console.log(servers);
servers.push({ip:'111', port: 2222});
servers.push({ip:'222', port: 3333});
const first_path = {
servers: servers,
selected: null,
};
return {
servers: servers.data,
maxServersInPath: 5,
pathElements: [first_path],
};
},
methods: {
changeServer: function (index, event) {
alert('on:change index=' + index)
console.log(event);
console.log('change');
}
}
})
This Pen doesn't use any external CSS resources.