Uses of key in loops vue js 3
Uses of key in loops
//new skill add with experiance
//html
<div id="app">
<h1>skills</h1>
<input type="text" v-model="newSkill.name">
<button @click="addskill">Add skill</button>
<ul>
<li v-for="(skill, i) in skills" @click="remove(i)">
{{i}} {{skill.name}} ({{skill.experience}})
</li>
</ul>
</div>
//js
var app = Vue.createApp({
data(){
return{
skills: [
{name:'Html', experience: 5},
{name:'Css', experience: 6},
{name:'Php', experience: 7}
],
newSkill: {name: "", experience: 0}
};
},
methods: {
addskill(){
this.skills.push(this.newSkill);
this.newSkill ={};
},
remove(i){
this.skills.splice(i, 1);
}
}
});
app.mount('#app');
.............................................
//1 ta item ke remove korle tar nicher item gulo thik thakbe
//html
<div id="app">
<h1>skills</h1>
<input type="text" v-model="newSkill.name">
<button @click="addskill">Add skill</button>
<ul>
<li v-for="(skill, i) in skills" @click="remove(i)" :key="skill.name">
<p>
{{i}} {{skill.name}} ({{skill.experience}})
<br>
<input type="text" placeholder="remark" @click.stop>
</p>
</li>
</ul>
</div>
//js
var app = Vue.createApp({
data(){
return{
skills: [
{name:'Html', experience: 5},
{name:'Css', experience: 6},
{name:'Php', experience: 7}
],
newSkill: {name: "", experience: 0}
};
},
methods: {
addskill(){
this.skills.push(this.newSkill);
this.newSkill ={};
},
remove(i){
this.skills.splice(i, 1);
}
}
});
app.mount('#app');
.....................................
No comments