vue 用v-for添加的值，在js里获取不到

Posted 2023-04-19

<div @click.stop="changeMusicFromList" v-if="!isHistoryList">
<p v-for="(item,index) in musicList" :name="item" :number="index">item</p>
</div>
javascript（vue的方法里）：
console.log(e.target); 这里返回的是<p name="沙龙 - 陈奕迅" number="0">沙龙 - 陈奕迅</p>
console.log(e.target.name); 这里反回的是undefined

e.target 指的是 p 标签这个 dom 元素；p 元素本身并没有 name 属性，所以你给标签上加的这个 name 不能这么获取；

var dom = e.target;
var name = dom.getAttribute('name'); // name = "沙龙 - 陈奕迅";这是通用的方式，获取绑定在标签上的数据，同样的，number 也可以这么取
var number = dom.getAttribute('number'); // number = 0

参考技术A name并不是（e.target）的值追问

但是使用事件代理时不是能够用e.target.name来确定触发dom吗？

参考技术B e.target.getAttribute("name")

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

【中文标题】在 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>