vue v-bind 参数怎么是undefined

在header组件中应用satr组件 :size="36" :score="seller.score" 这里两个值为什么都是undefined???

header组件

<template>
    <div>
        <star :size="36" :score="seller.score"></star>
    </div>
</template>
<script>
  import star from '../star/star.vue';
export default{
  components: {
      'star': star
    }
  };
</script>

satr组件

<template>
    <div class="star" :class="starType">
        <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item"></span>
    </div>
</template>

<script type="text/ecmascript-6">
  const LENGTH = 5;
  const CLS_ON = 'on';
  const CLS_HALF = 'half';
  const CLS_OFF = 'off';

  export default {
    porps: {
      size: {
        type: Number
      },
      score: {
        type: Number
      }
    },
    computed: {
      starType () {
        console.log(this.size);
        return 'star-' + this.size;
      },
      itemClasses () {
        console.log(this.score);
        let result = [];
        let score = Math.floor(this.score * 2) / 2;
        let hasDecimal = score % 1 !== 0;
        let integer = Math.floor(score);
        for (let i = 0; i < integer; i++) {
          result.push(CLS_ON);
        }
        if (hasDecimal) {
          result.push(CLS_HALF);
        }
        while (result.length < LENGTH) {
          result.push(CLS_OFF);
        }
        return result;
      }
    }
  };
</script>

<style>
    
</style>
阅读 3.3k
4 个回答

试试props:['size','score'],or写反了应该是props吧

size="36"

还有你header组件里的this.seller.score应该是undefined

单词写错了。。。props 不是porps

单词写错了:size="36" 没问题 但是这个 :score="seller.score" 没看到你的数据在哪? 想传字符串的话去掉:

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题