Javascript 在Vue.js中使用v-for多次渲染时，表单块会出错

我试图为Vue.js中字典列表中的每个条目多次呈现一个表单，但是当我更改第二个条目中的值时，第一个条目中的值（单选按钮输入的值）会发生更改，我无法理解为什么会发生这种情况

以下是我使用的代码片段：

<div v-for="movie in watchList" :key="movie.movieTitle" class="movieBlock">
          <p>Rate this movie</p>
          <form>
            <div class="rate" style="display: inline-block;">
              <input style="visibility: hidden;" type="radio" id="star5" v-model="movie.newReviewRating" name="rate" value="5" />
              <label for="star5" title="text">5 stars</label>
              <input style="visibility: hidden;" type="radio" id="star4" v-model="movie.newReviewRating" name="rate" value="4" />
              <label for="star4" title="text">4 stars</label>
              <input style="visibility: hidden;" type="radio" id="star3" v-model="movie.newReviewRating" name="rate" value="3" />
              <label for="star3" title="text">3 stars</label>
              <input style="visibility: hidden;" type="radio" id="star2" v-model="movie.newReviewRating" name="rate" value="2" />
              <label for="star2" title="text">2 stars</label>
              <input style="visibility: hidden;" type="radio" id="star1" v-model="movie.newReviewRating" name="rate" value="1" />
              <label for="star1" title="text">1 star</label>
            </div>
          </form>   
      </div>

评价这部电影

五星
四星
三星
双星
一颗星

同样，问题是，当我尝试更改呈现的第二个条目的选定输入时，第一个条目的值会发生更改，我无法理解为什么会发生这种情况

---

如果问题不清楚，我可以上传图片。

就像Bülent Akgül在评论中说的那样，你不能重复id，因此你需要更改每个元素的id，并更改每个标签的属性

所以问题是因为您使用的是属性的标签，它所做的是在具有for的id的元素上触发事件，因为每个循环的所有id和for都是相同的，所以它总是触发相同的电影

<div v-for="movie in watchList" :key="movie.movieTitle" class="movieBlock">
  <p>Rate this movie</p>
  <form>
    <div class="rate" style="display: inline-block;">
      <input style="visibility: hidden;" type="radio" :id="`rating-${movie.movieTitle}-star5`" v-model="movie.newReviewRating" name="rate-${movie.movieTitle}" value="5" />
      <label :for="`rating-${movie.movieTitle}-star5`" title="text">5 stars</label>
      <input style="visibility: hidden;" type="radio" :id="`rating-${movie.movieTitle}-star4`" v-model="movie.newReviewRating" name="rate-${movie.movieTitle}" value="4" />
      <label :for="`rating-${movie.movieTitle}-star4`" title="text">4 stars</label>
      <input style="visibility: hidden;" type="radio" :id="`rating-${movie.movieTitle}-star3`" v-model="movie.newReviewRating" name="rate-${movie.movieTitle}" value="3" />
      <label :for="`rating-${movie.movieTitle}-star3`" title="text">3 stars</label>
      <input style="visibility: hidden;" type="radio" :id="`rating-${movie.movieTitle}-star2`" v-model="movie.newReviewRating" name="rate-${movie.movieTitle}" value="2" />
      <label :for="`rating-${movie.movieTitle}-star2`" title="text">2 stars</label>
      <input style="visibility: hidden;" type="radio" :id="`rating-${movie.movieTitle}-star1`" v-model="movie.newReviewRating" name="rate-${movie.movieTitle}" value="1" />
      <label :for="`rating-${movie.movieTitle}-star1`" title="text">1 star</label>
    </div>
  </form>   
</div>


评价这部电影

五星
四星
三星
双星
一颗星
删除ID，因为您不能多次拥有相同的ID。这可能会解决你的问题。我看不到任何其他问题。谢谢你，比伦特！这对我帮助很大，解决了我的问题！