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

Posted 2023-02-22

【中文标题】在 Vue.js 中使用 v-for 多次渲染时，表单块会混乱

【英文标题】：Form block messes up when rendered multiple times using v-for in Vue.js

【发布时间】：2021-06-17 23:03:21

【问题描述】：

我正在尝试为 Vue.js 中字典列表中的每个条目多次呈现一个表单，但是当我在第二个条目中更改我的值时会发生什么，即单选按钮输入中的值第一个条目被更改，我无法弄清楚为什么会发生这种情况。

这是我使用的代码的 sn-p：

<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>

再一次，问题是，当我尝试更改呈现的第二个条目的选定输入时，第一个条目的值已更改，我不明白为什么会发生这种情况。

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

【问题讨论】：

删除 ID，因为您不能多次拥有相同的 ID。它可能会解决你的问题。我看不到任何其他问题。

谢谢比伦特！这对我有很大帮助并解决了我的问题！

【参考方案1】：

就像 Bülent Akgül 在 cmets 中所说，您不能重复 id，因此您需要更改每个元素的 id 并更改每个标签的属性 for。

所以问题是因为你使用了一个属性标签，它的作用是触发具有 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>