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

鍍金池/ 問答/HTML/ v-for配合ref獲取dom元素數(shù)組，但是使用的時候是數(shù)組的第一元素。

v-for配合ref獲取dom元素數(shù)組，但是使用的時候是數(shù)組的第一元素。

想獲取v-for渲染的每個元素的一個屬性，然后根據(jù)屬性值來添加其他屬性，但是問題來了，不到獲取元素。

  <div class="wrap" v-for="(e, i) in authors" ref="wrap">
     ....
  </div>

  mounted () {
    this.$http.get(
      '../static/api.json'
    ).then(res => {
      this.authors = res.data.authors
    }, res => {})
    console.log(this.$refs.wrap, this.$refs.wrap.length)
  }

控制臺輸出：
clipboard.png

這個問題是最不理解的，明明輸出的是個數(shù)組，顯示長度為20，但是輸出其長度卻為1。

回答
編輯回答
陌離殤

異步的原因，你的 console.log應(yīng)該放在this.authors = res.data.authors后面，異步會使console.log在get賦值之前執(zhí)行，所以length為1

2017年2月7日 00:40
編輯回答
醉淸風(fēng)

我說一下我的理解。首先要明白的是this.$http.get這是一個異步請求。也就是說在vue的mounted方法中，在發(fā)送異步請求后是會先執(zhí)行console.log(this.$refs.wrap, this.$refs.wrap.length)這段代碼，等到響應(yīng)完成再執(zhí)行響應(yīng)的代碼。
你的authors數(shù)組應(yīng)該是有一個初始值才會打印出來length為1，如果初始值是個空數(shù)組應(yīng)該是會報錯的。至于this.$refs.wrap為什么會打印出來所有的div元素我也不太理解，文檔中明明說這個不是響應(yīng)式的了

2018年6月11日 16:24