v-for 无法读取属性数据

Question

<template>
    <span>
        <i class="fa fa-star text-warning fa-2x" v-for="r in rating" :key="r"></i>
        <h1>{{rating}}</h1>
    </span>    
</template>


<script>
export default {
    name: "ratings",
    props: ["rating"],
}
</script>

<style>

</style>

这是我的子组件之一，其中 4 作为道具传递，当我尝试在 H1 标签中显示评分道具时它显示 4，但我不知道为什么我的标签没有迭代 4 次

如果你想复制相同的情况然后复制粘贴上面的代码并在 index.html 中的 public 文件夹中只需在下面添加这两个 cdn

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g==" crossorigin="anonymous" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />

并且在 App.vue、

<div>
    <ratings rating="4"></ratings>
</div>

也不要忘记在 App.vue

的脚本标签中导入并注册这个组件

有人可以帮我吗

Answer 1

通过向传递的 prop 添加绑定符号 : 将值作为 integer 传递，因为它是 string，并且只有一个长度，这就是它不迭代的原因。

<div>
    <ratings :rating="4"></ratings>
</div>

如果值来自服务器或其他地方，将值转换为循环，如下所示：

 <i class="fa fa-star text-warning fa-2x" v-for="r in parseInt(rating)" :key="r"></i>

Answer 2

v-for="r in parseInt(rating)"

Answer 3

我通过

解决了这个问题

<ratings :rating="parseInt(4)"></ratings>

v-for 无法读取属性数据

v-for cannot read prop data

twitter-bootstrap

font-awesome

vue.js

vuejs3