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

鍍金池/ 問答/HTML/ vue 獲取元素的問題

vue 獲取元素的問題

我想通過ref獲取下面box元素 在mounted里面 通過$nextTick獲取不到 用定時器或者用getElementById這些都獲取不到 只有最外面的容器floor可以獲取 里面的子元素都獲取不到，是因為v-for的原因嗎
<div class="floor">

<div class="floorA" v-show="item.lists.length" v-for="item in productCategories">
      <div class="title clearfix">
        <p class="prTitle">{{item.prTitle}}</p>
        <router-link :to="{path:'/invest',query: {productCategoryId: item.productCategoryId}}">更多 &gt; &gt;</router-link>
      </div>
      <ul class="bidList clearfix">
        <li 
          v-for="(list, index) in item.lists" 
          :class="{btwo: index % 3 === 1}"
          v-if="index < 3"
          >
          <h2>{{list.name}}</h2>
          <div ref="box" style="width:190px;height:190px;"></div>
        </li>
      </ul>
    </div>
  </div>

mounted() {

  this.$nextTick(() => {
    var box = this.$refs.box
    console.log(box)
  })
  
},
回答
編輯回答
陌上花

ref類似于通過id選擇元素，你循環(huán)了多個dox出來，可能要換個思路去拿box

2017年12月18日 19:10
編輯回答
命于你

建議用通過class獲取元素集合
:ref用法上類似與id選擇器
.$nextTick無法獲取的話
可以使用watch監(jiān)聽

2017年10月14日 00:44
編輯回答
柒喵

重新編輯一下，后來才發(fā)現(xiàn)，外層還有一個循環(huán)v-for="item in productCategories"
哪還要加個參數(shù)

v-for="item,i in productCategories"
:ref="'box_'+i+'_+index"
var box = this.$refs.box_1_1
這樣就能保證不重復(fù)了,
=====編輯分割線

先嘗試
我自己也沒有試過

<div class="floorA" v-show="item.lists.length" v-for="item in productCategories">
      <div class="title clearfix">
        <p class="prTitle">{{item.prTitle}}</p>
        <router-link :to="{path:'/invest',query: {productCategoryId: item.productCategoryId}}">更多 &gt; &gt;</router-link>
      </div>
      <ul class="bidList clearfix">
        <li 
          v-for="(list, index) in item.lists" 
          :class="{btwo: index % 3 === 1}"
          v-if="index < 3"
          >
          <h2>{{list.name}}</h2>
          <div :ref="'box'+index" style="width:190px;height:190px;"></div>
        </li>
      </ul>
    </div>
  </div>
mounted() {

  this.$nextTick(() => {
    var box = this.$refs.box1
    console.log(box)
  })
  
},
2017年8月1日 23:08