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

Question

我有一系列基于车辆数据和相关图像的卡片。我想为每张卡片添加一个自定义上传图片按钮，但存在引用问题。

使用标准输入类型文件，如果我从输入中选择 Browse 则可以：

<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>

但是我想使用自定义按钮。如果我隐藏输入并添加一个按钮使用：

        <input 
            type="file"
            @change="uploadImage"
            accept="image/*"
            :ref="`imageInput${item.id}`"
            class="d-none"
        >

       <v-btn @click="$refs.imageInput[item.id].click()">Upload photo</v-btn> 

然后单击 v-btn 我得到一个错误，因为我没有正确引用它。任何关于应该如何完成的指针？

使用方法：

<v-btn @click="buttonClicked(item.id)">Upload photo</v-btn>

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

我得到错误：

Error in v-on handler: "TypeError: element.click is not a function"

Answer 1

当 item 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()
}