Passing an HTML5 video element as a prop in Vue.js

I am attempting to pass an HTML5 video as a property from a parent component to a child component in Vuejs.

Parent Component:

    <template>
      <div>
         <video ref="video">
            <source src="@/assets/video.mp4" type="video/mp4">
         </video>
         <child-component :video="videoElement"></child-component>
      </div>
    </template>

    <script>
     export default {
       name: "ParentComponent",
       computed: {
         videoElement () {
           return this.$refs.video;
         },  
       };
    </script>

Child Component:

    <script>
     export default {
       name: "ParentComponent",
       props: {
         video: Object
       }
     };
    </script>

This method does not appear to be working for some unknown reason! How can I successfully send the video as a property?

Answer №1

The HTML video player is not considered an object. It's recommended to designate HTMLVideoElement as the type of prop used in the child component instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sending data with React using POST request

Currently in my React application, I have a form that includes fields for username and password (with plans to add "confirm password" as well). When submitting the form, I need it to send JSON data containing the email and password in its body. The passwo ...

storing negative floating point numbers in an array using regular expressions in JavaScript

I am currently working on creating a regular expression that can detect both positive and negative floating point numbers of any length. My goal is to store the captured values in an array as double data type. I have attempted the following pattern: input ...

Problem with input field borders in Firefox when displayed within table cells

Demo When clicking on any cell in the table within the JSFiddle using Firefox, you may notice that the bottom and right borders are hidden. Is there a clever solution to overcome this issue? I have experimented with a few approaches but none of them work ...

Vue-router: the browser tries to open a <router-link> element as if it were a local file

Having some trouble with Vue-router - when I click on a navigation link, the desired component briefly displays before the browser tries to open it as a file. For instance, clicking on the "Badger!" link results in the browser attempting to open a local f ...

Do [(ngModel)] bindings strictly adhere to being strings?

Imagine a scenario where you have a radiobutton HTML element within an angular application, <div class="radio"> <label> <input type="radio" name="approvedeny" value="true" [(ngModel)]=_approvedOrDenied> Approve < ...

Properly aligning text with checkboxes using HTML/CSS and tags like <span> or <div>

My goal is to have the text displayed as a block in alignment with the checkbox, adjusting based on the sidebar's width. For reference: Current Layout Preferred Layout I have shared the code on CodePen (taking into account screen resolution and wi ...

Why isn't the onChange function triggering in the input type text when the input is not manually typed in?

I am currently facing an issue with two text fields in my HTML form. Here is how they are set up: HTML : <input type="text" id="input1" onchange="doSomething();" disabled/> <input type="text" id="input2"/> JavaScript : function doSomething( ...

Is there a pub/sub framework specifically designed for managing events in Angular?

Having a background in WPF with Prism, I am familiar with the IEventAggregator interface. It allows you to define events that can be subscribed to from controllers and then triggered by another controller. This method enables communication between controll ...

In AngularJS, the $http get method is displaying the status code of the data object instead of

After pondering over this issue for several days, I am still unable to pinpoint what I am doing wrong. Any suggestions or insights would be greatly appreciated. My challenge lies in trying to showcase the response from a rest service to the user by utilizi ...

PubNub's integration of WebRTC technology allows for seamless video streaming capabilities

I've been exploring the WebRTC sdk by PubNub and so far, everything has been smooth sailing. However, I'm facing a challenge when it comes to displaying video from a client on my screen. Following their documentation and tutorials, I have writte ...

Events trigger React to render multiple times

I have implemented socket functionality on my website where users can send a word to the server, triggering an event (art-addpic) that broadcasts an image URL corresponding to that word to all users. However, only users with isArtist=true are allowed to re ...

Which type of element does Youtube utilize for the videos on its own domain - <iframe> or <video>?

Do they have a different method for incorporating their videos? My goal is to utilize the playbackRate property on a non-embedded YouTube video for a Chrome extension. ...

The output of the Node.js crypto.pbkdf2 function may not match the result obtained from CryptoJS.PBKDF

Currently, I am utilizing PBKDF2 on both the frontend with CryptoJS and the backend with Node.js. Despite using the identical salt, algorithm, number of iterations, and password, the derived keys are turning out to be different. Below is the code snippet ...

The communication between a Firefox XUL extension and a webpage

Currently developing a Firefox XUL extension and in need of incorporating interaction between the web page and the extension. For instance, whenever a link is clicked on the page, I would like to trigger a function within the XUL extension. Is there any k ...

How to Apply a CSS Class to the Body Tag in Angular 2.x

How can I add [class.fixed]="isFixed" to the body tag when Angular 2.x is bootstrapped inside the body (outside my-app)? <html> <head> </head> <body [class.fixed]="isFixed"> <my-app>Loading...</my-app> </body> & ...

Issue with implementing bootbox and jQuery.validator for AJAX login form collaboration

Here's a fiddle link that showcases the issue I'm facing. The problem arises when I try to Sign In on an empty modal form. The validator should highlight any fields in error and proceed to submit the form once the validation is successful. I&ap ...

Should the Express.js router be required directly or stored in a variable before use?

I've been pondering a performance question related to express.js. In my server.js file, I have all the routes defined and the child routes are imported as follows: const ROUTE__FOO = require('./routes/foo') const ROUTE__BAR = require(' ...

"Ensuring that every" within handlebars js

I have been exploring handlebars.js (hbs) and although I haven't mastered it yet, I am curious to know if there is an equivalent to the following code: {{#if all source}} If not, how can I create a similar functionality using handlebars.js? ...

What are the steps for conducting a component test with material ui?

My current component is built using . import React from 'react'; import { AppBar, Toolbar } from 'material-ui'; import { Typography } from 'material-ui'; import { MuiThemeProvider, createMuiTheme } from 'material-ui/sty ...

Retrieving information from various datasets through inquiry

First Model const mongoose = require("mongoose"); const finalApprovalSchema = mongoose.Schema({ formId: String, designApproval: String, rejectionReason: String, date: { type: Date, default: Date.now, }, }); const FinalApproval ...