Vue

by Сергей Тарасевич

HTML

<div id="app">
    <h2>Список пользователей</h2>
    <userform :user="user"></userform>
    <div>
        <useritem v-for="(user, index) in users"
                    :key="index"
                    :user="user"
                    :index="index"
                    v-on:userchange="change">
        </useritem>
    </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

Vue.component('userform', {
    props: ["user"],
    template: `<div>
                    <input type="text" v-model="user.name" />
                    <input type="number" v-model="user.age" />
                </div>`,
});
Vue.component('useritem', {
    props: ["user", "index"],
    template: `<div>
                    <p>Name: {{user.name}} <br> Age: {{user.age}}</p>
                    <button  v-on:click="userChange(index)">Change</button>
                </div>`,
    methods: {
        userChange: function(index){
            this.$emit('userchange', index);
        }
    }
});
new Vue({
    el: "#app",
    data: {
        users:[
            {name: 'Tom', age: 23},
            {name: 'Bob', age: 26},
            {name: 'Alice', age: 28}
        ],
        user:{}
    },
    methods:{
        change: function(index){
            this.user = this.users[index];
        }
    }
});