kunalvarma05/index.html

## index.html
<!DOCTYPE HTML>
<html>

<head>
    <title>Vue JS</title>
    <script src="https://unpkg.com/vue@2.2.1"></script>
</head>

<body>
    <div id="app">
        <create-user-form v-bind:users="users"></create-user-form>

        <ul>
            <h4> Users: {{ userCount }} </h4>
            <li v-for="(user, index) in users">
                {{ user.name }}
                <button v-on:click="removeUser(index)">x</button>
                <button v-if="!user.verified" v-on:click="verifyUser(index)">Verify</button>
                <b v-if="user.verified">✔</b>
            </li>
        </ul>
    </div>

    <template type="text/x-template" id="create-user-form">
        <div class="form">
            <input type="text" v-model="username" placeholder="Enter user's name...">
            <button v-on:click="createUser">Create {{ username }}</button>
        </div>
    </template>

    <script>
        Vue.component('create-user-form', {
            template: "#create-user-form",
            props: ['users'],
            data: function() {
                return {
                    username: ""
                };
            },
            methods: {
                createUser: function() {
                    this.users.push({
                        name: this.username,
                        verified: false
                    });
                    this.username = "";
                },
            }
        });


        var app = new Vue({
            el: "#app",
            data: {
                username: "",
                users: [{
                        name: "abc",
                        verified: false
                    },
                    {
                        name: "pqr",
                        verified: false
                    },
                    {
                        name: "xyz",
                        verified: false
                    }
                ]
            },
            computed: {
                userCount: function() {
                    return this.users.length;
                }
            },
            methods: {
                removeUser: function(index) {
                    this.users.splice(index, 1);
                },
                verifyUser: function(index) {
                    this.users[index].verified = true;
                }
            }
        });
    </script>

</body>

</html>
	<!DOCTYPE HTML>
	<html>

	<head>
	<title>Vue JS</title>
	<script src="https://unpkg.com/vue@2.2.1"></script>
	</head>

	<body>
	<div id="app">
	<create-user-form v-bind:users="users"></create-user-form>

	<ul>
	<h4> Users: {{ userCount }} </h4>
	<li v-for="(user, index) in users">
	{{ user.name }}
	<button v-on:click="removeUser(index)">x</button>
	<button v-if="!user.verified" v-on:click="verifyUser(index)">Verify</button>
	<b v-if="user.verified">✔</b>
	</li>
	</ul>
	</div>

	<template type="text/x-template" id="create-user-form">
	<div class="form">
	<input type="text" v-model="username" placeholder="Enter user's name...">
	<button v-on:click="createUser">Create {{ username }}</button>
	</div>
	</template>

	<script>
	Vue.component('create-user-form', {
	template: "#create-user-form",
	props: ['users'],
	data: function() {
	return {
	username: ""
	};
	},
	methods: {
	createUser: function() {
	this.users.push({
	name: this.username,
	verified: false
	});
	this.username = "";
	},
	}
	});


	var app = new Vue({
	el: "#app",
	data: {
	username: "",
	users: [{
	name: "abc",
	verified: false
	},
	{
	name: "pqr",
	verified: false
	},
	{
	name: "xyz",
	verified: false
	}
	]
	},
	computed: {
	userCount: function() {
	return this.users.length;
	}
	},
	methods: {
	removeUser: function(index) {
	this.users.splice(index, 1);
	},
	verifyUser: function(index) {
	this.users[index].verified = true;
	}
	}
	});
	</script>

	</body>

	</html>