父组件传递值
<Entry v-if="qureyVis && temp && Classvalue && !isqurey " :userList="userList" @UpdateUser="updateScore" @addUsers="addScore"></Entry>
子组件:
<template>
<div class="ss">
<el-row class="borderColor">
<el-col :span="14" class="borderColor2">用户id</el-col>
<el-col :span="5" class="borderColor2">姓名</el-col>
<el-col :span="4" >课程成绩</el-col>
</el-row>
<el-row v-for="(item,index) in userList" :key="index" :class="item.status===200?'borderColor1 colorgreen':'borderColor1 '">
<el-col :span="14" class="borderColor2">{{item.id}}</el-col>
<el-col :span="5" class="borderColor2">{{item.name}}</el-col>
<el-col :span="4" ><input type="number" v-on:change="size(item.score,index)" v-model="item.score" :min=0 :max=100 /></el-col>
</el-row>
</div>
</template>
export default {
data(){
return{
currentPage:1,
}
},
props:['userList'],
mounted(){
},
methods:{
// 对input输入的数字进行操作
size(score,index){
if(score>100){
// this.userList[index].score=100
this.$set(this.userList[index],'score',100)
}else if(score<0 || score==''){
// this.userList[index].score=0
this.$set(this.userList[index],'score',0)
}else if(score.length>1&&score[0]==0){
// this.userList[index].score=score.substr(1);
this.$set(this.userList[index],'score',score.substr(1))
this.size(this.userList[index].score,index)
}
// console.log(this.data);
},
}
}
子页面中需要用watch.
https://blog.csdn.net/lander_xiong/article/details/79018737
在父组件定义函数,子组件调用父组件的方法更新,参考:
this.$emit('父组件方法名称');
你这写法有问题啊,props也就是userList是只读属性,你就算$set也没用啊。你需要在data里定义一个值,把props转换成,data才行。
<template>
<div class="ss">
<el-row class="borderColor">
<el-col :span="14" class="borderColor2">用户id</el-col>
<el-col :span="5" class="borderColor2">姓名</el-col>
<el-col :span="4" >课程成绩</el-col>
</el-row>
<el-row v-for="(item,index) in userList" :key="index" :class="item.status===200?'borderColor1 colorgreen':'borderColor1 '">
<el-col :span="14" class="borderColor2">{{item.id}}</el-col>
<el-col :span="5" class="borderColor2">{{item.name}}</el-col>
<el-col :span="4" ><input type="number" v-on:change="size(item.score,index)" v-model="item.score" :min=0 :max=100 /></el-col>
</el-row>
</div>
</template>
export default {
data(){
return{
currentPage:1,
userList:[] //接收props
}
},
props:['userList'],
mounted(){
let {userList}=this.props;
this.userList=userList;
},
methods:{
// 对input输入的数字进行操作
size(score,index){
if(score>100){
// this.userList[index].score=100
this.$set(this.userList[index],'score',100)
}else if(score<0 || score==''){
// this.userList[index].score=0
this.$set(this.userList[index],'score',0)
}else if(score.length>1&&score[0]==0){
// this.userList[index].score=score.substr(1);
this.$set(this.userList[index],'score',score.substr(1))
this.size(this.userList[index].score,index)
}
// console.log(this.data);
},
}
}