not all words are spoken. Code:
Vue.component ("todoItem", {
props:["item","index"],
template:`<li @click="$emit("deleteitem",this.index)">{{index}}{{item}}</li>`
})when doing a child component to pass a value to the parent component, when $emit () violates the law to pass the parameter, I write the parameter as this.index. I wonder if the value is passed in this way, what does the this.index mean here?
complete code
complete code
< html lang= "en" >
< head >
<meta charset="UTF-8">
<title>todolist</title>
<link rel="stylesheet" href="./main.css">
<script src="./vue.js"></script> < / head >
< body >
<h1>todolist</h1>
<hr>
<b></b>
<div id="app">
<input type="text" v-model="inputValue" @keyup.enter="handleClick">
<button @click="handleClick"></button>
<ul>
<todo-item
v-for="(item,index) in list"
:item="item"
:key="index"
:index="index"
@deleteitem="deleteli"
>
</todo-item>
</ul>
</div>
<script>
Vue.component("todoItem",{
props:["item","index"],
template:`<li @click="$emit("deleteitem",this.index)">{{index}}{{item}}</li>`
})
var app = new Vue({
el:"-sharpapp",
data:{
list:[],
inputValue:""
},
methods:{
handleClick(){
this.list.push(this.inputValue);
this.inputValue=""
},
deleteli(index){
this.list.splice(index,1)
}
}
})
</script> < / body >
< / html >