小编Mar*_*nKT的帖子

我正在 Vue 中开发拖放组件，但是当我尝试使用 this.$refs 访问表单时，它返回未定义。我正在使用Vuetify 中的对话框 UI 组件将我的上传表单放入对话框/模式中。

代码笔

该对话框是另一个组件的子组件，并且只有单击“添加附件”按钮后该表单才可见。我怀疑后者是问题所在，但我不确定如何解决。我认为将代码放在已安装的生命周期挂钩下就可以解决问题，但我知道当它将按钮呈现到父组件中时会立即运行。

<template>
  <v-dialog v-model="dialog" persistent max-width="600px" style="z-index:999;">
    <template v-slot:activator="{ on }">
      <v-btn small outlined color="#102a43" v-on="on">Add Attachments</v-btn>
    </template>
    <v-card>
      <v-card-text class="pt-4">
        <v-container class="my-4">
          <form ref="fileform" class="file-upload-form">
            <div v-if="dragAndDropCapable" class="dropzone">
              <p>
                Drop your file here, or
                <span>browse</span>
              </p>
              <p>Supported File Types: pdf, jpg, png</p>
            </div>
            <div v-else>
              <v-file-input label="Select File" outlined dense></v-file-input>
            </div>
          </form>
        </v-container>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="#b2b2b2" text @click="cancel">Cancel</v-btn>
        <v-btn color="#102a43" outlined>Upload</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script> …