我需要从vue模板引用具有动态名称的ref参数

Question

<div v-for="i in 4" :class="(images[i] === null) ? 'not-removable' : 'removable'" class="img">
<input style="display: none"
type="file" 
@change="selectImg(i, $event)"
accept="image/*"
:ref="'imgInput' + i">
<button class="img-button" 
@click="$refs['imgInput' + i].click()">+</button>
<img src="#" :id="'img' + i"> 
<div class="delete" @click="deleteImg(i, $event)">x</div>       
</div>

我需要这样的东西，但是在<button/>区域有一个错误写着

参

TypeError: $(("imgInput"+ i)]。点击不是功能

Answer 1

首先:如何调试这个?(这将帮助你沿着这条路走下去)。

你可以做一个简单的console.log(this.$refs)来检查refs是如何在你的组件中构造的。

现在揭晓答案。当你在v-for中使用refs时，Vue将创建一个数组。您可以访问您期望访问的内容:

$refs[("imgInput" + i)][0].click()