vue中循环列表，总提示属性没有定义，是怎么回事？
vue中循环列表，总提示属性没有定义，是怎么回事呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.active {
background-color: pink;
}
</style>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 表单 -->
<totle-com :stuname="stuname" :stuage="stuage" :stusex="stusex" @add-num="add" @remove-all="removeAll"></totle-com>
<!-- 列表 -->
<table width="500" border="1">
<tr>
<th>check</th>
<th>name</th>
<th>age</th>
<th>sex</th>
<th>remove</th>
</tr>
<tbody is="my-list" :stuinfo="stuinfo" @del-num="del"></tbody>
</table>
</div>
<!-- 列表 子组件 -->
<template id="list">
<div>
<p><button @click="removeAll1">全部删除</button></p>
<tbody>
<tr v-for="(item,index) of stuinfo" :class="item.checked?'active':''">
<td><input type="checkbox" v-model="item.checked"></td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td><button @click="del1(index)">remove</button></td>
</tr>
</tbody>
</div>
</template>
<!-- 表单 子组件 -->
<template id="totle">
<div>
<p>name:<input type="text" v-model="stuname"></p>
<p>age: <input type="text" v-model="stuage"></p>
<p>sex:
<select v-model="stusex">
<option value="male">男</option>
<option value="female">女</option>
</select>
</p>
<p><button @click="add1(index)">添加</button></p>
</template>
</body>
<script>
/****表单*******/
Vue.component("totle-com", {
template: "#totle",
props: ["stuname","stuage","stusex"],
methods: {
add1(index) {
this.$emit("add-num", index)
},
}
})
/*列表 子组件*/
Vue.component("my-list", {
template: "#list",
props: ["stuinfo"],
methods: {
del1(index) {
this.$emit("del-num", index)
},
removeAll1() {
this.$emit("remove-all")
},
}
})
/*父组件*/
new Vue({
el: "#app",
data: {
stuname: "",
stuage: "",
stusex: "male",
stuinfo: [{
name: "jack",
age: 22,
sex: "male",
checked: false
}, {
name: "mike",
age: 22,
sex: "male",
checked: false
}]
},
methods: {
add() {
let name = this.stuname;
let age = this.stuage;
let sex = this.stusex;
let checked = false;
this.stuinfo.push({
name,
age,
sex,
checked
})
},
del(i) {
if (this.stuinfo[i].checked) {
this.stuinfo.splice(i, 1);
}
},
removeAll() {
let newStuInfo = this.stuinfo.filter(item => {
return !item.checked;
});
this.stuinfo = newStuInfo;
}
}
})
</script>
</html>
强力驱动