vue 获取元素的问题

Question

我想通过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)
  })
  
},

Answer 1

建议用通过class获取元素集合
:ref用法上类似与id选择器
.$nextTick无法获取的话
可以使用watch监听

Answer 2

ref类似于通过id选择元素，你循环了多个dox出来，可能要换个思路去拿box

Answer 3

重新编辑一下，后来才发现，外层还有一个循环v-for="item in productCategories"
哪还要加个参数

v-for="item,i in productCategories"
:ref="'box_'+i+'_+index"
var box = this.$refs.box_1_1
这样就能保证不重复了,
=====编辑分割线

先尝试
我自己也没有试过

<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)
  })
  
},