vue.js - 在执行javascript方法之前如何渲染模态元素（idVideo1）以避免null
问题描述
我在这个组件中遇到了这个麻烦。我正在使用模态，功能是上传视频。接下来，单击“保存并继续”按钮。我想做的主要想法是在第二个模式中查看上传的视频，但它没有发生。然后，我收到这样的错误，我认为，它与一个为 null 的元素有关，因为它还没有被渲染。另外，当我单击按钮时，我在方法部分调用了一个 Javascript 方法，我正在使用这个元素（idVideo1），当然 idVideo1 还没有渲染。我试图把提到的方法放在 vue js 的挂载属性中但它也没有用。任何想法？，如何避免空值？， 谢谢。
这是 HelloWorld.vue 的代码：
<template>
<div>
<v-btn
class="elevation-0 mr-3"
color="primary"
dark
small
@click="addDialog = true"
>
hey , click me button </v-btn>
<v-dialog
v-model="addDialog"
content-class="rounded-dialog"
width="500px"
@close="() => (addDialog = false)"
>
<VideoMaster/>
</v-dialog>
</div>
</template>
<script>
import VideoSelection from './VideoSelection'
import VideoMaster from './VideoMaster'
export default {
props:{
isModal: {
type: Boolean,
// eslint-disable-next-line vue/no-boolean-default
default: true
}
},
data() {
return {
addDialog:false,
}
},
components:{
VideoSelection,VideoMaster
},
}
</script>这是 VideoMaster.vue 的代码
<template>
<div>
<v-dialog
v-if="isModal"
v-model="showInput"
class="overflow-visible"
max-width="500"
>
<v-card
class="elevation-15 videoCreationForm"
dark
>
<v-card-title
class="headline pa-5"
style="border-top-radius: 15px"
>
<v-btn
v-if="currentPage > 0"
class="elevation-0 mr-3"
fab
small
@click="currentPage--"
>
<v-icon >
mdi-arrow-left
</v-icon>
</v-btn>
<v-spacer />
<div :style="` ${ pages[currentPage].title.length>=14 ? 'margin-left:-35px' : '' } `">
{{ pages[currentPage].title || 'prue' }}
</div>
<v-spacer />
</v-card-title>
<v-tabs-items v-model="currentPage">
<v-tab-item :key="0">
<template>
<v-card-text
class="pa-5 vertical-hidden"
style="height: 60vh"
>
<form
class="mb-5 mt-7"
@submit.prevent="addVideo"
>
<div class="form-group">
<center>
<div>
<video
id="id"
controls="controls"
height="216"
width="387"
>
<source id="src">
</video>
</div>
<v-btn
class="accent-3 blue mb-2 mt-10"
dark
@click="pickFile()"
>
Select File
</v-btn>
<input
v-show="false"
id="label"
ref="inputUpload"
type="file"
@change="load($event)"
>
</center>
</div>
</form>
<v-row>
<v-col
class="d-flex justify-center"
cols="12"
>
<center>
<v-text-field
class="Inputmodified"
hide-details="auto"
label="Video name"
/>
</center>
</v-col>
</v-row>
</v-card-text>
<v-card-actions
class="pa-5"
@click="nextStep"
>
<v-btn
block
class="accent-3 blue"
dark
@click="getVideo()"
>
Save and Continue
</v-btn>
</v-card-actions>
</template>
</v-tab-item>
<v-tab-item :key="1">
<template>
<v-card-text
class="pa-5 vertical-hidden"
style="height: 60vh"
>
<div class="card-background rounded-m" />
<div class="mb-7 mt-7">
<v-row>
<v-col
class="d-flex justify-center"
cols="12"
>
<video
id="idVideo1"
controls="controls"
height="216"
width="387"
>
<source id="idVideo1src">
</video>
</v-col>
</v-row>
</div>
<v-row>
<v-col
class="d-flex justify-center"
cols="6"
>
<v-label>
From xxxx
</v-label>
</v-col>
<v-col
class="d-flex justify-center"
cols="6"
>
<v-label>
To xxxx
</v-label>
</v-col>
</v-row>
<v-row>
<v-col
class="d-flex justify-center"
cols="6"
>
<input
id="toMinutes"
class="minutestoCenter"
name="toMinutes"
placeholder="00:00:00"
type="text"
>
</v-col>
<v-col
class="d-flex justify-center"
cols="6"
>
<input
id="fromMinutes"
class="minutestoCenter"
name="fromMinutes"
placeholder="00:00:00"
type="text"
>
</v-col>
</v-row>
<v-row>
<v-col
class="d-flex justify-center"
cols="12"
>
<center>
<v-text-field
class="Inputmodified"
hide-details="auto"
label="Video Section Name"
/>
</center>
</v-col>
</v-row>
</v-card-text>
<v-row>
<v-col
class="d-flex justify-center"
cols="6"
>
<v-card-actions
class="pa-5"
@click="nextStep"
>
<v-btn
class="accent-3 blue"
dark
>
Add another video
</v-btn>
</v-card-actions>
</v-col>
<v-col
class="d-flex justify-center"
cols="6"
>
<v-card-actions
class="pa-5"
@click="nextStep"
>
<v-btn
class="accent-3 blue"
dark
>
Save and Continue
</v-btn>
</v-card-actions>
</v-col>
</v-row>
</template>
</v-tab-item>
</v-tabs-items>
</v-card>
</v-dialog>
</div>
</template>
<script>
export default {
props:{
isModal: {
type: Boolean,
// eslint-disable-next-line vue/no-boolean-default
default: true
}
},
data() {
return {
contenedorVideo:'',
currentPage: 0,
showInput: true,
pages: [
{
title: 'Upload Video'
},
{
title: ' Copy Video Section'
},
]
}
},
computed: {
buttonText() {
return this.selectedFile ? this.selectedFile.name : this.defaultButtonText
}
},
methods: {
getVideo(){
var source = document.createElement('source');
source=this.contenedorVideo
console.log(this.contenedorVideo)
document.getElementById("idVideo1").src = this.contenedorVideo;
},
load(e) {
const url = URL.createObjectURL(e.target.files[0])
this.contenedorVideo = url
const video = document.querySelector('#id')
video.setAttribute('src', url)
},
loadxVideo(e) {
const url = URL.createObjectURL(e.target.files[0])
const video = document.querySelector('#videoX')
video.setAttribute('src', url)
},
nextStep() {
this.currentPage++
},
pickFile() {
this.$refs.inputUpload.click()
},
},
}
</script>解决方案
推荐阅读
- java - 卷曲下降最后 5 个字节，但 wget 工作正常
- fonts - 如何在没有管理员权限的情况下在 VS Code(Windows) 中使用自定义字体来安装字体？
- python - 如何使用 python 多处理库处理访问日志？
- graphql - 为什么 AppSync 在更新时抛出错误？
- python - tkinter 对象上的 list() 方法失败
- android - 在 Buildozer 中使用 CrystaX 构建 APK 时出错
- java - Weka CSVloader - 错误（错误的值数。读取）
- reactjs - 使用 React Router 的 Docker 反向代理到 React App
- android - 然后比较不同时间并显示错误消息android
- codenameone - 生产应用程序上的 Google 控制台崩溃报告