Getting the src attribute from an element looped through with v-for

When I loop through an element, I have the following code:

<li v-for="file in lesson.files">
  <a @click="sourceReplace()" class="copied" :id="file.file_id" :src=file.src>
     {{file.name}}  
  </a>
</li>

I want to be able to click on this element and set the src of the clicked one to a variable called links

methods: {
  sourceReplace(){
    var currentVideo = document.getElementById('current-video');
    var currentSource = document.getElementById('current-source');
    var link = this.src;
    currentSource.setAttribute('src', link);
    currentVideo.setAttribute('src', link);
    alert(link)
    currentVideo.load();
    currentVideo.play();
  }
},

However, when I try to access the links variable, it returns undefined

Answer №1

Do you ever wonder why things are done a certain way? How about trying this approach instead:

<li v-for="file in lesson.files">
  <a @click="sourceReplace(file.src)" class="copied" :id="file.file_id">
     {{file.name}}  
  </a>
</li>

And then, consider implementing this method:

methods: {
  sourceReplace(src){
    var currentVideo = document.getElementById('current-video');
    var currentSource = document.getElementById('current-source');
    var link = src;
    currentSource.setAttribute('src', link);
    currentVideo.setAttribute('src', link);
    alert(link)
    currentVideo.load();
    currentVideo.play();
  }
},

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

Issue with toggleClass() function when using Angular 4

My code includes the addition of jQuery in the script using import * as $ from 'jquery'; and also adding jQuery in the HTML file. However, the toggleClass() function is not functioning correctly. Upon checking the console, there were no error ...

Struggling to iterate over key-value pairs in a JSON object?

I am currently working with AngularJS and have successfully retrieved exchange rates from fixer.io. However, I am facing difficulties in extracting both the country and rate data by looping through the key-value pairs. At the moment, I can only access the ...

The issue with JQuery preventDefault not functioning correctly in the navigation bar

I'm having trouble with my test code. The preventDefault() function doesn't seem to be working as intended. While the alert message is displaying, the link is still being followed. Can someone help me pinpoint the issue in my code? <html> ...

Working with JSON structure using Javascript

I successfully transformed an XML file into a JSON format, but now I need to manipulate the data in order to achieve a specific desired structure. Here is the Original format { "machine": "Hassia2", "actual_product_date": "08/24/2017", "holdi ...

Json path that begins with 0

I am encountering a situation where I need to extract data from an API using an https.get request. The issue arises when the json path starts with a 0. Can anyone explain what this means and how can I access the data successfully? https.get(url, function( ...

Unleashing the Power of Handheld Barcode Scanners: A Guide to Optimal Reading

My objective is to utilize a handheld barcode scanner to scan barcodes and process the data using Javascript. A barcode scanner functions in a similar way to a keyboard, outputting raw scanned/translated data. I simply need to capture this output and proc ...

The imported package in Node.js cannot be located

I'm encountering an issue when trying to deploy my project on the server. Everything runs smoothly on my PC with no import problems. Thank you for your assistance! Error Message: Error [ERR_MODULE_NOT_FOUND]: Module '/home/igor/backend/alina_edu ...

Utilize VueJS to retrieve JSON data

onMounted(() => { productService.value .getProducts() .then((data) => (products.value = data)); console.log((products)) }); Upon inspecting the products object using console.log, I noticed the following. screenshot of the console outpu ...

When running npx webpack, an error occurred stating, "Property 'minify' cannot be read from undefined."

I've been following the introductory tutorial on webpack from this particular link: https://webpack.js.org/guides/getting-started/ However, when I attempt to execute npx webpack, it encounters an error as shown below: ERROR in main.js from Terser Ty ...

When should the data in Vue.js be updated and re-rendered?

Just starting to dip my toes into Vue.js. I want to update the data in methods and dynamically change the view based on that data. // template <div v-if="currentGraphType.type === 'foo'"> <!-- Some other graphs --> </div> &l ...

Having difficulty creating a snapshot test for a component that utilizes a moment method during the rendering process

I am currently testing a component that involves intricate logic and functionality. Here is the snippet of the code I'm working on: import React, { Component } from 'react'; import { connect } from 'react-redux' import moment from ...

Is there a way to update the value of an element that is continuously changing through a setInterval() function when hovering the mouse over it?

I am currently a novice working on developing a pomodoro timer. At the moment, when you click the button to start the timer, it switches to displaying the remaining time once activated. One of the features I want to implement is the ability for users to h ...

Issue with displaying custom in-line buttons in JQGrid

Currently, I am utilizing jqgrid 3.8.2 (I am aware it's not the latest version, but I plan on updating it soon after seeking some advice :-)) I have successfully incorporated a couple of in-line buttons into my jqgrid using the default formatter &apo ...

Exploring the world of three.js, webGL, and GLSL through the magic of random

When using three.js to call a fragment shader, I have a shader that specifies a color for my material in rgb format. I am trying to figure out a way to multiply those colors by a random value. The code I currently have is as follows: gl_FragColor = vec4( ...

Extracting values from PHP using AJAX

Whenever a user clicks on the download button, a zip file is successfully created on the server with the necessary files. However, instead of getting an alert with the location of the zip variable ($zip) from PHP as expected, it shows [object Object]. The ...

Node.js throwing error due to incorrect format of bind parameters as an array

I have been working with Nodejs/express and trying to implement a paramerized query in my API. However, I encountered the following error message in my console: Bind parameters must be array if namedPlaceholders parameter is not enabled Below is a snippet ...

Exploring React Native Networking using react-native-router-flux

Hello everyone, I have a quick query. I am looking to assign each Button to a different page. import React, { Component } from 'react'; import { ActivityIndicator, FlatList, Text, View, TouchableOpacity } from 'react-native'; export ...

How can I redirect after the back button is pressed?

I am currently working with a trio of apps and scripts. The first app allows the user to choose a value, which is then passed on to the second script. This script fetches data from a database and generates XML, which is subsequently posted to an Eclipse/J ...

What is the best approach in AngularJS for implementing a browser modal that returns a promise?

How can I implement a custom modal in my code that allows me to perform an action only after the user clicks 'okay'? var modalInstance = this.$modal.open({ templateUrl: '/app/tests/partials/markTest.html', controller: ['$sc ...

I am currently grappling with a JavaScript mouse over event and encountering some difficulties

I am looking to dynamically change the background image of my body div whenever a link is hovered over. Here is a snippet of my code: JAVASCRIPT: var i = 0, anchors = document.querySelectorAll("zoom"), background = document.getElementById("body") ...