excuse me, vue reported an error Getter is missing for computed property "methods". What does it mean?
star
<template id="star">
<div class="star-box">
<!--:{{starnum|percent(stars)}}
-->
<div v-for="n in stars" class="star starcount" @click="mousedown(n)"></div>
<div class="star-div">
<div v-for="n in format" :style="n==format?stylelist:repstyle" class="star starbg" @click="mousedown(n)" ></div>
</div>
</div>
</template>
<script>
export default{
name:"star",
data:function(){
return {
isdown:false,
downnum:0,
}
},
props:["stars","starnum"],
computed:{
format:function(){
return Math.ceil(this.starnum)
},
stylelist:function(){
return {
width:50*(1-this.format + this.starnum)+"px",
}
},
repstyle:function(){
return {
width:50+"px",
}
},
// filters:{
// width:function(v){
// return v + "px"
// },
// percent:function(v,n){
// var per = v / n
// if(per>=1){
// return ""
// }else if(per>=0.75){
// return ""
// }else if(per>=0.5){
// return ""
// }else if(per>=0.25){
// return ""
// }else{
// return ""
// }
// }
// },
methods:{
mousedown(n){
if((n-0.5)>this.starnum){
n=n-0.5
}else if((n-0.5)==this.starnum){
n=n
}else{
n = n - 1
}
// this.$emit("input",n)
}
}
}
}
</script>
<style scoped="scoped">
.star-div{
/*float: left;*/
position: absolute;
}
.star{
width: 50px;
height: 50px;
background-size: 50px 50px;
background-repeat: no-repeat;
float: left;
}
.starcount{
background-image: url(images/star24_on@2x.png);
}
.starbg{
background-image: url(images/star24_off@2x.png);
}
</style>
html:
<template>
<div>
:<input v-model.number="starnumber">
:<input v-model.number="stars">
<star :starnum="starnum" :stars="stars" @input="changenum"></star>
</div>
</template>
<script>
import star from "components/star/star"
export default {
name: "app",
components: {
star:star,
},
data(){
return{
/**/
starnumber:5,
stars:5,
}
}
computed:{
starnum:function(){
if(this.starnumber>this.stars){
return this.stars
}else{
return this.starnumber
}
}
},
methods:{
//
changenum:function(n){
this.starnumber = n
},
</script>