如何使用动态引用触发输入文件答案

【问题标题】：how to trigger a input file with dynamic ref如何使用动态引用触发输入文件
【发布时间】：2021-07-05 21:14:21
【问题描述】：

我有以下代码用于呈现文件上传输入列表：

<ul>
    <li v-for="doc in requiredDocuments" :key="doc.key">
      <div>
        <div>
          <p>
            {{ doc.name }}
          </p>
          <p>
            {{ doc.description }}
          </p>
        </div>
        <div>
          <input :id="`uploader_${doc.key}`" :ref="`uploader_${doc.key}`" :name="`uploader_${doc.key}`" type="file" accept="image/*,.pdf,.doc,.docx,.csv,.xls,.xlsx,.ppt,.pptx" class="sr-only" @change="onChangeFileUpload()" />
          <button @click="$refs[`uploader_${doc.key}`].click()"> Upload </button>
        </div>
      </div>
    </li>
  </ul>

如您所见，引用是为隐藏文件输入动态创建的。每个文件输入都有一个上传，我想用上传按钮触发文件上传交互窗口。

然而我在渲染这个 HTML 时遇到了问题，我得到了这个错误：

TypeError: _ctx.$refs[("uploader_" + (intermediate value))] is undefined

这是错误的 JsFiddle 娱乐：https://jsfiddle.net/36gyqj8o/2/

【问题讨论】：

标签： javascript vue.js vuejs3

【解决方案1】：

我建议你在这种情况下使用一种方法

<button @click="upload(doc.key)"> Upload </button>

脚本块应该是这样的

const app = Vue.createApp({
  data() {
    return {
      requiredDocuments: [{
          name: 'Study 1',
          key: '1',
          description: 'This is a description for what type of document you need to upload'
        },
        {
          name: 'Study 2',
          key: '2',
          description: 'This is a description for what type of document you need to upload'
        },
        {
          name: 'Study 3',
          key: '3',
          description: 'This is a description for what type of document you need to upload'
        },
        {
          name: 'Study 4',
          key: '4',
          description: 'This is a description for what type of document you need to upload'
        }
      ]
    }
  },
  methods: {
   upload(key) {
     this.$refs[`uploader_${key}`].click();
   },
  },
  template: document.getElementById('main').innerHTML
})

app.mount('#app')

修改js小提琴链接https://jsfiddle.net/b4asugxk/

【讨论】：