<div id="app">
<div class="user" v-for="user in users">
<div>{{user.Name}}</div>
<div class="clients" v-for="client in user.clients">
<div>
Name:{{client.Name}} - Tel:{{client.Tel}}
</div>
</div>
<div style="margin-left: 30px">
<input type="text" v-model="user.NameNewClient"/>
<input type="text" v-model="user.TelClient">
<button v-on:click="newClient(user)">Добавить</button>
</div>
</div>
<div style="margin-top: 30px">
<input type="text" v-model="newUser">
<button v-on:click="addNewUser()">Новый user</button>
</div>
</div>
.user{
color:green
}
.clients{
margin-left: 30px;
color: blue;
}
var app = new Vue({
el:"#app",
data:{
newUser:"",
users:[
{Name:"User1", NameNewClient:"",TelClient:"", clients:[
{Name:"client1", Tel:"001"}
]},
{Name:"User2",NameNewClient:"", TelClient:"", clients:[
{Name:"client1", Tel:"001"},
{Name:"client2", Tel:"002"},
]}
],
},
methods:{
newClient(user){
user.clients.push({Name:user.NameNewClient, Tel:user.TelClient});
user.NameNewClient ="";
user.TelClient = "";
},
addNewUser(){
this.users.push({Name:this.newUser,clients:[]});
this.newUser = "";
},
}
})
This Pen doesn't use any external CSS resources.