Permalink
Find file Copy path
9eb53f6 Jan 13, 2020
bunny Yay
0 contributors

Users who have contributed to this file

67 lines (58 sloc) 1.55 KB
<!DOCTYPE html>
<html>
<head>
<title>Vue.js! 🚀</title>
</head>
<body>
<!-- HTML -->
<div id="app">
<p v-show="seeCompleted">
<a href="#" v-on:click="seeCompleted=false">Select People</a>
</p>
<p v-show="!seeCompleted">
<a href="#" v-on:click="seeCompleted=true">View Selected People</a>
</p>
<!-- Select People -->
<div v-show="!seeCompleted">
<ul>
<li v-for="person in people">
<label>
<input v-bind:value="person" v-model="selectedPeople" type="checkbox">
{{ person }}
</label>
</li>
</ul>
<!-- Add new user input and button -->
<input type="text" v-model="newPerson">
<button type="button" v-on:click="addPerson"> Add Person </button>
</div>
<!-- View Selected People -->
<div v-show="seeCompleted">
<ul>
<li v-for="selectedPerson in selectedPeople"> {{ selectedPerson }} </li>
</ul>
</div>
</div>
<!-- JavaScript -->
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
seeCompleted: false,
people: ['Mike', 'Kat', 'Dat', 'Todd'],
selectedPeople: [],
newPerson: ""
},
methods: {
addPerson() {
// Add new person to list of people
this.people.push(this.newPerson)
// Clear input field
this.newPerson = ''
}
}
})
</script>
</body>
</html>