Can anyone provide guidance on how to access an element's id in Vue.js?

Is there a way to retrieve the id of an element using vue js? The elements are generated dynamically through v-for from the youtube data API.

<v-card v-for="video in videos" :key="video.snippet.resourceId.videoId">
  <v-img
    :src="video.snippet.thumbnails.high.url"
    :id="video.snippet.resourceId.videoId"
    :lazy-src="`https://picsum.photos/10/6?image=${2 * 5 + 10}`"
    @click="renderVideo(id)"
  ></v-img>
</v-card>

renderVideo(id) {
  console.log(this.$attrs["id"]);
}

I would greatly appreciate any assistance with this issue, thank you!

vue.jsyoutube-api

Answer №1

I have moved my initial comment to an answer, following the suggestion:

If renderVideo() is included in your component methods, all you have to do is provide the current id as a parameter:

...
@click="renderVideo(video.snippet.resourceId.videoId)"
...

renderVideo(id) { 
   console.log(id); 
}

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

How to manage form submissions in Vue.js using inputs within child components

I'm working on a parent component that acts as a form. This form consists of multiple child components, each containing input fields. <template> <div class="form"> <generalData v-model="input" /> <textAreas v- ...

javascriptvue.jsvuejs2

Execute the script before the Vue.js framework initiates the HTML rendering

In order to determine if the user is logged in or not, and redirect them to the login page if they are not, I am looking for a way to check the user's login status before the HTML (or template) loads. I have attempted to use beforeCreate() and variou ...

javascriptvue.js

Learn the process of transferring data from a page to a layout in NUXT

I am in the process of creating a basic website. The goal is to dynamically change the Navbar elements based on the data set in the navLayout within the page template. My plan is to pass this data to the layout and then utilize props to transmit it to the ...

javascriptvue.jsnuxt.js

Is there a way to ensure that a "catch all other" route in the Vue Router will also capture the URL if a portion of it matches a predefined route?

After following the suggestion to implement a catch all route from this article, I realized that it does not capture URLs that partially match a defined route. routes: [ { path: "/album/:album", name: "album", component: Album, } ...

javascriptvue.jsredirectvue-router

What is a functional component in defineSlots?

With the latest version of Vue SFC (3.3+), slot scope has become type safe with the introduction of defineSlots. Is there a way to achieve the same type safety for slots in functional components as well? export default defineComponent({ name: 'MyCompo ...

vue.js

Troubleshooting Cross-Origin Resource Sharing Problem in Vue.js Single Page Application and Node.js API

My Node.js Express app is set up with the cors npm package installed. Additionally, there is basic authentication enabled on the nginx server hosting my Node.js app (authentication requires an 'Authorization' key in the headers of each request). ...

node.jsvue.jscorsvue-resource

Trouble updating Vue 2 project using vue-cli due to npm update failure

I set up a Vue 2 project using vue-cli and attempted to execute npm update. Unfortunately, I encountered the following error: { npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-c ...

vue.jsnpmvue-cli

Creating a Vue.js directive that can access the context of a loop

Vue.directive("custom", { inserted(el, binding, vnode) { let val = binding.value; let arg = binding.arg let mods = binding.modifiers let expr = binding.expression let cont = vnode.context .... // adjust l ...

vue.jsvuejs2

Executing an external script in Nuxt after re-rendering: Best practices?

Looking for a solution in Nuxt/Vue to properly execute an external script (hosted by a third party) after the DOM has successfully rerendered on every route. The challenge arises when using a script that dynamically adds elements to the dom, causing confl ...

vue.jsnuxt.js

Concentrate on Selecting Multiple Cells in ag-Grid (Similar to Excel's Click and Drag Feature)

Is there a way to click and drag the mouse to adjust the size of the focus box around specific cells in ag-Grid? This feature is very handy in Excel and I was wondering if it is available in ag-Grid or if there is a workaround. Any insights would be apprec ...

javascriptvue.jsag-grid

When trying to import a Vue template snippet, you may encounter a message indicating a promise object

I'm facing a challenge in my project where I need to dynamically include a template snippet from another file into my Single File Component (SFC) template. However, instead of the expected markup, all I see is [Object Promise]. It seems that this issu ...

vue.jsvuejs2promise

Using VueJS3 in conjunction with leaflet results in an issue

Looking to integrate interactive maps into my VueJS3 application. Successfully implemented the following code: <template> <div id="mapContainer"></div> </template> <script> import 'leaflet/dist/leaflet.css&a ...

vue.jsleafletvuejs3

Could it be that v-show does not function properly on elements that are not dynamic

I'm not experienced in web development and this is my first attempt at using a web framework. The framework I am currently learning is vue.js version 3. My goal: I want to create 4 app instances (nav, defaultApp, bootstrapApp, vueApp). When I select ...

javascripthtmlvue.js

Collaborating on data through module federation

Currently, I am in the process of developing a Vue.js and TypeScript application using Vite. In addition, I am utilizing the vite-module-federation-plugin for sharing code across different applications. My main inquiry revolves around whether it is possibl ...

typescriptvue.jsvitestorewebpack-module-federation

Vue-ctl project creation halted by operating system rejection

While working on a Vue-CLI project, I encountered an issue. Has anyone else faced this problem before? Operating system: Windows 10 - Command Prompt (admin rights) @vue-cli version: 4.5.4 npm version: 6.14.6 Here is the command I ran: vue create font_ ...

javascriptnode.jsvue.jsnpm

Issue with video.js text track memory leakage (WebVTT/VTT)

I am utilizing Video Text Tracks to showcase advanced live information on top of the video. A new video is loaded every few minutes, each with its own .webvtt file (consisting of 2-3k lines). Although everything is functioning properly, there is a persis ...

javascriptvue.jsmemory-leaksgarbage-collectionvideo.js

Nuxtjs app experiences compatibility issues with Bootstrap templates

Greetings to all who come across this issue. I am currently working on a project using Nuxt.js with the Bootstrap template. The header and footer are displaying correctly, but the problem lies in the design of the body not showing up. https://i.stack.imgu ...

vue.jsbootstrap-4nuxt.js

how to use $emit to modify a computed property in VueJS

I have a form with multiple components for input fields, each containing another component for displaying errors. Here is the code: // Input component <template></template> <script> import Store from '../../store' exp ...

vuejs2vue.js

Passing arguments with $emit - Vue

Here is a simple method to handle alerts using $emit. But when passing arguments, it seems like the event is not being triggered at all. The goal is to update the value of alert with the result. Listening for the event on mount: this.$eventHub.$on(' ...

javascriptvue.js

Issue with Vue.js component not properly retrieving value from variable

Having recently started using Vue.js in my laravel application, I have incorporated the following component from https://github.com/saintplay/vue-swatches. It works well, but I am encountering an issue when trying to pass a HEX color value from a variable ...

laravelvue.js