在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue的ref作為綁定元素的時候使用，為啥輸出的是一個數(shù)組？

vue的ref作為綁定元素的時候使用，為啥輸出的是一個數(shù)組？

HTML代碼：

<ul class="list">

  <li class="item" 
  v-for='item of letters' 
  :key='item'
  :ref='item'
  @click='handleClick'
  @touchstart='handleTouchStart'
  @touchmove='handleTouchMove'
  @touchend='handleTouchEnd'
  >{{item}}</li>
</ul>

邏輯代碼：
handleTouchMove(){

  console.log('handleTouchMove');
  if (this.touchStatus) {
      const startY = this.$refs.A[0].offsetTop
      console.log(this.$refs.A); =====>這個打印出數(shù)組來了,為什么？
      console.log(startY);
  }
},

數(shù)據(jù)項：letters =[A,B,C,D,E,F,G,H,I,.....,X,Y,Z]

請問各位大佬，這里的ref是通過數(shù)據(jù)綁定的形式使用的時候，為啥 this.$refs.A打印出來的是一個數(shù)組？

clipboard.png

回答
編輯回答
愛是癌

這個測試了下，還真奇特
https://cn.vuejs.org/v2/api/#ref 官方的建議貌似不允許ref用數(shù)據(jù)綁定

我看了下源碼 跟這個函數(shù)里registerRef()、processRef、checkInFor以及refInFor有關
當ref的元素el本身或者 parent有列表渲染時v-for ,會將refInFor設置成true
然后ref.key在registerRef函數(shù)就被設置成了數(shù)組

2017年10月3日 21:40
編輯回答
夕顏

這是 vue 的特性, 自動把 v-for 里面的 ref 展開成數(shù)組的形式. 假設你的 ref 不是動態(tài)的, 而是靜態(tài)的 ref="a", 那么不管你執(zhí)行多少次循環(huán), 最后 ref 只會有一個值, 所以 vue 為了處理這種情況會把 v-for 里 ref 轉(zhuǎn)為 數(shù)組形式, 為了能捕捉所有的 ref 值.

2018年6月15日 19:00