Vue.js $refs未定义-自定义文件输入按钮引用问题

我有一系列基于车辆数据和相关图像的卡片列表。我想添加一个自定义上传图像按钮到每个卡，但有一个参考问题

使用标准输入类型文件，如果我从输入中选择“浏览”，则它会工作：

<v-col v-for="item in vehicles" :key="item.id">
    <v-card class="mx-auto" outlined>
        <input 
            type="file"
            @change="uploadImage"
            accept="image/*"
            :ref="`imageInput${item.id}`"
        >
    </v-card>
</v-col>

---

当项目id为4时，ref将输出如下字符串

imageInput4

在您的

v-btn

中，您正试图通过索引访问该项，它应该如下所示

$refs[`imageInput${item.id}`]

不过，我建议将该调用移动到一个方法，这样就很容易调试了

buttonClicked(itemId) {
    let ref = `imageInput${itemId}`
    console.log('ref: ', ref)
    let element = this.$refs[ref]
    console.log('element', element)
    element.click()
}

---

恐怕两者都不起作用：1）vm.$refs[（“imageInput”+item.id）]。单击不是函数2）v-on处理程序中的错误：“TypeError:element.click不是函数”@RGriffiths请发布您看到的错误。我在本地重新创建了它，它工作了。您建议$refs[

imageInput${item.id}

]。单击（）@RGriffiths

@click=“$refs[`imageInput${item.id}`]。如果我使用元素[0]，单击（）”

。返回的元素是一个数组-似乎可以工作。谢谢很遗憾，它不想描述一个方法。对我来说似乎有点笨重，但我对Vue是新手，只是在学习诀窍。再次感谢

imageInput4

$refs[`imageInput${item.id}`]

buttonClicked(itemId) {
    let ref = `imageInput${itemId}`
    console.log('ref: ', ref)
    let element = this.$refs[ref]
    console.log('element', element)
    element.click()
}