Javascript v-for循环中的单选输入选择具有相同值的多个单选按钮

有点难以解释

我创建了一个简单的评级系统，它使用产品阵列的

input type=“radio”

使用

v-for=“products in products”

，我在显示页面上所有产品的数组中循环

            <div class="block" v-for="product in products">
                    <h3>{{product.name}}</h3>
                    <p>Desc: {{product.description}}</p>
                    <p>Price: £{{product.price}}</p>


                    <h3>Rating</h3>
                    <form @submit.prevent="ratingAdd(product)">
                    <input type="radio" value = "1" name = "ratings1" v-model="ratingNum">1
                    <input type="radio" value = "2" name = "ratings2" v-model="ratingNum">2
                    <input type="radio" value = "3" name = "ratings3" v-model="ratingNum">3
                    <input type="radio" value = "4" name = "ratings4" v-model="ratingNum">4
                    <input type="radio" value = "5" name = "ratings5" v-model="ratingNum">5
                    <input type="submit">

                </div>

{{product.name}
Desc:{{product.description}}

价格：£{产品价格}

评级
1.
2.
3.
4.
5.

产品显示很好，但每当我点击一个单选按钮时，它就会在所有产品中选择多个值相同的单选按钮。i、 e如果我在产品1上单击3，它也会在其他产品上选择3

我也试过用同样的名字。它不起作用

任何帮助都将不胜感激

---

提前谢谢

单选按钮需要唯一的名称

您可以使用中的索引来拥有唯一的名称。此外，您的

v-model

需要为每个产品单独绑定

<div class="block" v-for="(product, index) in products">
    <h3>{{product.name}}</h3>
    <p>Desc: {{product.description}}</p>
    <p>Price: £{{product.price}}</p>
    <h3>Rating</h3>
    <form @submit.prevent="ratingAdd(product, index)">
    <input type="radio" value = "1" :name = "'ratings1-' + index" v-model="ratingNum[index]">1
    <input type="radio" value = "2" :name = "'ratings2-' + index" v-model="ratingNum[index]">2
    <input type="radio" value = "3" :name = "'ratings2-' + index" v-model="ratingNum[index]">3
    <input type="radio" value = "4" :name = "'ratings4-' + index" v-model="ratingNum[index]">4
    <input type="radio" value = "5" :name = "'ratings5-' + index" v-model="ratingNum[index]">5
    <input type="submit">
</div>

示例输出：

{name: "Product A", description: "desc A", price: 2, email: "test@test", rating: "4"}
{name: "Product B", description: "desc B", price: 3, email: "test@test", rating: "3"}

---

我更新了答案-ratingNum仍然没有索引。现在它应该可以工作了。我更改了所有无线电字段的：name=“'ratings'+index”，但是ratingNum[0，0]使其不再工作，如果我评级，它将返回未定义。此外，我更改了名称，因为如果我更改了值，它不会取消选择。请发布您的ratingAdd（product）方法的代码。非常感谢您的帮助。这很有效。谢谢你的时间。

{name: "Product A", description: "desc A", price: 2, email: "test@test", rating: "4"}
{name: "Product B", description: "desc B", price: 3, email: "test@test", rating: "3"}