<template>
<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>
</template>
<script>
export default {
name: "vpn-path-configure",
props: [
'serversProp',
],
data() {
const servers = JSON.parse(atob(this.serversProp));
console.log(servers);
servers.push({ip:'111', port: 2222});
const first_path = {
servers: servers,
selected: null,
};
return {
servers: servers.data,
maxServersInPath: 5,
pathElements: [first_path],
};
},
methods: {
changeServer: function (index, event) {
console.log(event);
console.log('change');
}
},
}
</script>
<style scoped>
</style>
Подскажите почему не работает?
