v-for动态绑定ref遇到的坑以及解决办法

2020-01-19  本文已影响0人  辉夜真是太可爱啦

动态绑定了ref,发现this.$refs['itemForm0']拿不到

<div v-for="(item,index) in form" :key="index">
  <el-form :ref="`itemForm${index}`" label-position="right" :model="item" :rules="rules" class="flex-form" label-width="10px">
    <el-form-item label="" prop="name">
      <el-input type="text" class="input-200" v-model="item.name" placeholder=""></el-input>
    </el-form-item>
  </el-form>
</div>

后来改为了ref="itemForm",发现this.$refs.itemForm[0]可以拿到,可以推断出ref类似于一个数组,不会覆盖,而是会累积

<div v-for="(item,index) in form" :key="index">
  <el-form ref="itemForm" label-position="right" :model="item" :rules="rules" class="flex-form" label-width="10px">
    <el-form-item label="" prop="name">
      <el-input type="text" class="input-200" v-model="item.name" placeholder=""></el-input>
    </el-form-item>
  </el-form>
</div>
上一篇 下一篇

猜你喜欢

热点阅读