Vue中如何让列表内单选框根据产品评分匹配选中状态

问题场景 #

我有一个存储产品（帖子）的数组，每个产品的评分数值从数据库获取，已经通过{{ Math.round(Object.values(product.rating)[0]) }}实现了四舍五入后的平均评分显示。现在需要把这个评分对应到星级单选按钮上：点击评分时，匹配当前评分的星级单选框要处于选中状态。单个产品用v-model能正常实现，但列表中多个产品各有不同评分时出现问题：

• 尝试通过匹配单选框id/value和产品评分设置:checked，但模板中用this导致代码无效
• 另一种checked绑定写法逻辑错误，同样无效
• 用v-model绑定post.rating时，因为所有单选框name相同，页面中只能选中最后一个帖子的评分

错误原因分析 #

1. 模板中错误使用this：Vue模板中直接访问变量即可，不需要加this，this仅在脚本部分使用
2. checked绑定逻辑错误：:checked需要绑定布尔值，而非字符串'checked'或空字符串
3. 单选框组name冲突：所有产品的星级单选框使用同一个name="stars"，导致整个页面的单选框属于同一组，只能选中一个选项

正确解决方案 #

完整代码示例 #

<template>
    <div class="postsList">
        <div class="post" v-for="post in posts" :key="post.id">
            <div class="title">Title: {{ post.title }}</div>
            <div class="currentrating">
                评分: {{ getRoundedRating(post.rating) }}
            </div>
            <div class="vote">
                <div class="rating">
                    <!-- 为每个产品生成唯一的单选框组name -->
                    <div class="star" v-for="index in stars" :key="index">
                        <input
                            type="radio"
                            :name="`stars-${post.id}`"
                            :value="index"
                            v-model="post.rating"
                            @change="ratePost(post)"
                        />
                        <label>☆</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const stars = 5;
const posts = ref([
    { id:1, title: "post1", rating: 2 },
    { id:2, title: "post2", rating: 3 },
    { id:3, title: "post3", rating: 2 },
    { id:4, title: "post4", rating: 5 },
    { id:5, title: "post5", rating: 2 },
    { id:6, title: "post6", rating: 1 },
    { id:7, title: "post7", rating: 2 },
    { id:8, title: "post8", rating: 3 },
    { id:9, title: "post9", rating: 4 },
    { id:10, title: "post10", rating: 1 },
]);

// 处理数据库返回的rating结构（如果是Object类型）
function getRoundedRating(rating) {
    // 如果rating是从数据库来的对象，比如{ average: 2.3 }，则取数值后四舍五入
    const rawRating = typeof rating === 'object' ? Object.values(rating)[0] : rating;
    return Math.round(rawRating);
}

// 处理评分提交逻辑
function ratePost(post) {
    // 这里可以写提交到数据库的逻辑，比如调用API
    console.log(`提交帖子${post.id}的评分：${post.rating}`);
}
</script>

<style scoped>
.post {
    padding: 10px;
    border-bottom: 1px solid #eee;
}
.rating {
    display: flex;
    margin-bottom: 10px;
}
.title {
    margin-bottom: 10px;
    font-weight: bold;
}
.currentrating {
    margin-bottom: 10px;
    color: #666;
}
/* 可选：选中的星变为实心 */
.rating input:checked + label {
    color: #ffc107;
}
.rating label {
    cursor: pointer;
    font-size: 20px;
}
.rating input {
    display: none;
}
</style>

关键修改点 #

1. 唯一的单选框组name：用:name="stars-${post.id}"为每个产品生成独立的单选框组，避免组内冲突
2. 正确处理rating结构：封装getRoundedRating函数处理数据库返回的可能为对象的rating，统一转换为四舍五入后的数值
3. 移除错误的this引用：模板中直接使用变量和函数，不需要this
4. 优化用户体验：添加CSS隐藏单选框，用label实现点击星级交互，选中的星高亮显示

额外说明 #

• 如果你的product.rating是数据库返回的对象（比如包含多个评分维度），getRoundedRating函数可以根据实际结构调整取值逻辑
• 评分提交时，ratePost函数可以接收当前post对象，方便携带id和新评分调用后端API

内容的提问来源于stack exchange，提问作者crawlingdev