为啥 this.$refs 在 Vue 子组件中未定义?
Posted
技术标签:
【中文标题】为啥 this.$refs 在 Vue 子组件中未定义?【英文标题】:Why is this.$refs undefined in Vue child component?为什么 this.$refs 在 Vue 子组件中未定义? 【发布时间】:2020-07-18 13:36:39 【问题描述】:我正在 Vue 中处理拖放组件,但是当我尝试使用 this.$refs 访问表单时,它返回未定义。我正在使用dialog UI component from Vuetify 将我的上传表单放入对话框/模式中。
CodePen
对话框是另一个组件的子组件,在单击“添加附件”按钮之前,表单不可见。我怀疑后者是问题,但我不确定如何解决它。我认为将代码放在已安装的生命周期钩子下可以解决问题,但我知道当它将按钮呈现到父组件时会立即运行。
<template>
<v-dialog v-model="dialog" persistent max- 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>
export default
data: function()
return
files: [],
dialog: false,
dragAndDropCapable: false
;
,
methods:
isDragAndDropCapable()
const div = document.createElement("div");
return (
("draggable" in div || ("ondragstart" in div && "ondrop" in div)) &&
"FormData" in window &&
"FileReader" in window
);
,
cancel()
this.dialog = false;
,
mounted()
//Verify Drag and Drop Capability
this.dragAndDropCapable = this.isDragAndDropCapable();
//Code below return undefined - Expected behavior is to return form element
console.log(this.$refs.fileform);
;
</script>
<style lang="scss" scoped>
.dropzone
border: 2px dashed #90a4ae;
border-radius: 8px;
min-height: 5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&:hover
cursor: pointer;
p
margin-bottom: 0;
&:first-of-type
font-weight: 500;
font-size: 1rem;
color: #263238;
span
color: #62b0e8;
&:last-of-type
font-size: 0.8rem;
</style>
【问题讨论】:
【参考方案1】:默认情况下,v-dialog 组件中的内容在激活之前不会呈现。
添加 eager 属性来改变这个<v-dialog eager>
https://vuetifyjs.com/en/components/dialogs/
【讨论】:
【参考方案2】:在挂载时,v-dialog 并没有实际挂载,或者说它没有初始化。 我已经修改了你的 CodePen。
试试这个 v-dialog 的急切道具,如下所示:
<v-app id="app">
<v-app id="inspire">
<v-dialog v-model="dialog" persistent max- eager>
<template v-slot:activator=" on ">
<v-btn color="red lighten-2"
dark
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>
</v-app>
</div>
【讨论】:
以上是关于为啥 this.$refs 在 Vue 子组件中未定义?的主要内容,如果未能解决你的问题,请参考以下文章