Different ways to modify elements in NUXT.js using Vue.js

I've recently been experimenting with integrating NUXT and Django on my own, and now I am curious about how to add a button to seamlessly transition to the next video using VUE.

  <video id="movieads" class="center" width="640" controls>
  <source src="https://cdn.videvo.net/videvo_files/video/free/2013-08/small_watermarked/hd0983_preview.webm" type="video/webm">

</video>
<button v-on:click="">Next Video</button>

For this, I will use the following JavaScript code: 

document.getElementById('movieads').src = OTHER_URL;

javascriptvue.jsnuxt.js

Answer №1

functions: {
    Modify() {
      console.log("Skip Advertisements");
      this.$refs.video.src =
        "NEWVDO";
      console.log(this.$refs.video.src);
    }
  },

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

I'm struggling to understand the reasoning behind the 'undefined' error occurring in the Google Maps distance service

Currently facing a puzzling issue with an 'undefined' exception. Developing a tool to track distance traveled between two locations, leveraging Google Maps distance matrix. Upon selecting a vehicle, entering an origin and destination, and clickin ...

javascripthtmlgoogle-maps

I am looking to grasp the concept of the Conditional ternary statement

I attempted to convert the code below into a ternary operator, but unfortunately ended up with an undefined result. Could someone please clarify where I made a mistake and advise on how to correct it properly? Thanks in advance. const plantNeedsWater = f ...

javascript

The shadow feature in Three.js doesn't seem to be functioning properly

I'm having trouble getting the Three.js shadow effect to work in version r82. I believe I have everything set up correctly, but for some reason it's not working. Can anyone point out what I might be missing? Here is an example link for referen ...

javascriptthree.js

Use JavaScript to swap out images

How can I change the image arrow when it is clicked? Currently, I have this code snippet: http://codepen.io/anon/pen/qEMLxq. However, when the image is clicked, it changes but does not hide. <a id="Boton1" class="button" onClick="showHide()" href="j ...

javascripthtmlimage

Tips on implementing a jQuery .load() function using an anchor tag within dynamic content

I am working on a search page where user input is taken from a form and then sent to a PHP file that makes a cURL call to an external server. The PHP file receives an array from the server, which it uses to display HTML in a "results" div on the original s ...

phpjavascriptjqueryajaxmodal-dialog

Issues encountered with the v-model functionality in a Laravel and Vue.js integrated to-do list

Recently, I created a to-do list application using Laravel and Vue.js. The concept is simple: users can add categories and within each category, they can create a list of tasks or to-dos. However, I encountered a minor issue with the input fields - whateve ...

javascriptlaravelvue.js

Is there a way for me to acquire the Amazon Fire TV Series?

I'm currently working on developing a web app for Amazon Fire TV, and I require individual authorization for each app. My plan is to utilize the Amazon Fire TV serial number for this purpose. However, I am unsure how to retrieve this serial using Jav ...

javascripthtmlamazon-fire-tv

Is there any difference in loading speed when using an async function in the createConnection method of promise-mysql?

Is it more efficient to use asynchronous createConnection or not? Does this impact the loading speed in any way? I am working with express, ReactJS, and promise-mysql. Which approach is preferable? Option 1: async connect () { try{ ...

javascriptmysqlreactjsexpressecmascript-6

Using AJAX to submit a form and then refreshing the page within the current tab

I am facing an issue with my web page that contains multiple tabs, some of which have forms. Whenever a form is successfully submitted, the page reloads but always goes back to the default first tab. To address this, I am attempting to use a storage variab ...

javascripthtmljqueryajaxforms

Looking to automate the selection of a dropdown menu using Selenium with JavaScript

Below is the code snippet for a drop-down: <div class="w-1/2 px-8 pt-6"> <div class="Styled__FieldWrapper-sc-1fqfnqk-1 bQZNMa mb-6"> <label class="form-label" for="transfer.account">Transfer Acc ...

javascriptseleniumselenium-webdriver

A guide on integrating MySQL table data into React card elements

After successfully populating a React table within a card (see first code snippet below) with MySQL table data, I am now faced with the challenge of populating a card's information with the same SQL data. The image below displays how cards are curren ...

javascriptreactjsmaterial-ui

Update the scrollspy navigation in a div with overflow by toggling the active class

Struggling to implement a navigation menu within a self-scrolling div using html/css/jquery. Looking for the menu items to toggle the active class when in view or at the top of the scrolling div. I'm essentially trying to achieve something like this ...

javascripthtmljquerycss

Enhance the textarea using Javascript when clicked

I am experimenting with styling my textarea using a combination of JAVASCRIPT and CSS. The goal is to make it expand in size from 20px height to 120px height when clicked, using document.getElementById("tweet_area"). However, I am facing an issue where t ...

javascriptcss

Issue with Twilio's sendMessage function: it is not successfully delivering messages to every value within

I am encountering a problem with Twilio failing to send a message to all the values in an array. var index; var a = req.body.numbers; console.log(a); if (req.body.numbers.indexOf("undefined") > -1) { console.log("No numbers stored"); } else { for ...

javascriptarraysnode.jsexpresstwilio

Combining Date and Time in Javascript: A Guide

As a JavaScript beginner, I am struggling with combining date and time pickers. Despite finding similar questions, I have not yet found the solution I need. I have two inputs: one for the datePicker and another for the timePicker. <form> <div clas ...

javascripthtmljqueryangularjs

ngPrime table column selection and data extraction

I am looking to extract multiple columns from a table. Can anyone suggest the best approach for this? Does NGPrime offer any functionality for achieving this task? Appreciate your help! ...

javascriptangulartypescript

What is the best method for showcasing various content using a uniform accordion style in React?

What is the most efficient way to display various content within multiple accordions? view image description here This is the current approach I am taking in my project, where shipping information and delivery options will involve different textboxes, labe ...

javascriptcssreactjstwitter-bootstrap

Steps for iterating through an array within an object

I currently have a JavaScript object with an array included: { id: 1, title: "Looping through arrays", tags: ["array", "forEach", "map"] } When trying to loop through the object, I am using the following ...

javascriptarrays

Utilizing Pug for Passing Variables to JavaScript

I am working with a Pug view that displays a set of links to users. The user is already authenticated and their username and department are stored in session variables. I am able to pass these variables to the view using this code: res.render('landin ...

javascriptnode.jsexpresspug

React Native Router Flux encountered duplicate keys in two children

Version(s) react-native-router-flux v3.31.2 react-native v15.2.1 I am encountering an issue when trying to call Actions.dialog() multiple times and receiving an error message. Despite attempting the fix mentioned in https://github.com/aksonov/react-nat ...

javascriptmodal-dialogreact-nativerouterflux