Vue - Toggling similar elements with no keys
HTML
<div id="app">
<div v-if="isUsername">
<Label>Username</Label>
<input v-model='data'/>
</div>
<div v-else>
<Label>Email</Label>
<input v-model='data' />
</div>
<button @click="toggle">
Toggle
</button>
<span> {{data}} {{data2}}</span>
</div>
CSS
body {
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
new Vue({
el: "#app",
data: {
isUsername: true,
data2: null,
data: null
},
methods: {
toggle() {
this.isUsername = !this.isUsername
}
}
})