Javascript 为什么在Vue子组件中未定义$refs?
我正在Vue中处理拖放组件,但当我尝试使用它访问表单时,$refs返回未定义。我正在使用将上载表单放置到对话框/模式中 该对话框是另一个组件的子组件,在单击“添加附件”按钮之前,该表单不可见。我怀疑后者是个问题,但我不确定如何解决它。我想把代码放在挂载的生命周期钩子下就可以了,但我知道当它将按钮呈现到父组件中时,它会立即运行Javascript 为什么在Vue子组件中未定义$refs?,javascript,vue.js,components,vuetify.js,Javascript,Vue.js,Components,Vuetify.js,我正在Vue中处理拖放组件,但当我尝试使用它访问表单时,$refs返回未定义。我正在使用将上载表单放置到对话框/模式中 该对话框是另一个组件的子组件,在单击“添加附件”按钮之前,该表单不可见。我怀疑后者是个问题,但我不确定如何解决它。我想把代码放在挂载的生命周期钩子下就可以了,但我知道当它将按钮呈现到父组件中时,它会立即运行 <template> <v-dialog v-model="dialog" persistent max-width="600px" style="
<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>
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>
添加附件
把你的文件放在这里,或者
浏览
支持的文件类型:pdf、jpg、png
取消
上传
导出默认值{
数据:函数(){
返回{
文件:[],
对话:错,
dragAndDropCapable:错误
};
},
方法:{
isDragAndDropCapable(){
const div=document.createElement(“div”);
返回(
(div | |中的“可拖动”(div中的“ondragstart”和div中的“ondrop”)&&
窗口中的“FormData”&&
窗口中的“文件阅读器”
);
},
取消{
this.dialog=false;
}
},
安装的(){
//验证拖放功能
this.dragAndDropCapable=this.isDragAndDropCapable();
//下面的代码返回未定义-预期行为是返回表单元素
log(this.$refs.fileform);
}
};
.dropzone{
边框:2个虚线#90a4ae;
边界半径:8px;
最小高度:5雷姆;
显示器:flex;
弯曲方向:立柱;
证明内容:中心;
对齐项目:居中;
&:悬停{
光标:指针;
}
p{
页边距底部:0;
&:第一类{
字号:500;
字号:1rem;
颜色:#263238;
跨度{
颜色:#62b0e8;
}
}
&:最后一种{
字体大小:0.8rem;
}
}
}
默认情况下,v-dialog组件中的内容在激活后才会呈现
添加渴望属性以更改此
默认情况下,v-dialog组件中的内容在激活后才会呈现 添加渴望属性以更改此
安装时,v-dialog未实际安装或未初始化。 我修改了你的密码笔 试试下面这个v-dialog的渴望道具:
<v-app id="app">
<v-app id="inspire">
<v-dialog v-model="dialog" persistent max-width="600px" 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>
添加附件
把你的文件放在这里,或者
浏览
支持的文件类型:pdf、jpg、png
取消
上传
安装时,v-dialog未实际安装或未初始化。
我修改了你的密码笔
试试下面这个v-dialog的渴望道具:
<v-app id="app">
<v-app id="inspire">
<v-dialog v-model="dialog" persistent max-width="600px" 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>
添加附件
把你的文件放在这里,或者
浏览
支持的文件类型:pdf、jpg、png
取消
上传