How to get src from v-for looped element

Question

I am looping on an element:

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

I need when clicking on this element to return the src of the clicked one to the variable which 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();
  }
},

links returns undefined

DOM manipulations like a vanilla js app is not a good idea in Vue, and mostly an indication of doing something wrong. Use button instead of "a" because it's not a link. ```@click="sourceReplace"``` is the way of calling method without parameters. "this" is not the element you clicked, it's the whole component. There is no "this.src". To pass src use ```@click="sourceReplace(file.src)"``` And you need to share lessons.files array and the template. — Bulent, May 10 '21 at 14:24
@BülentAkgül Just a small nitpick, but there's nothing wrong with the `@click="sourceReplace()"` syntax in of itself here. The difference is that `sourceReplace` tells Vue to bind directly to the method, and pass the `click` event to it, while `sourceReplace()` tells Vue to *call* the method rather than bind it, with explicitly zero arguments. ([More details](https://stackoverflow.com/questions/50635404/parentheses-while-calling-a-method-in-vue)) — zcoop98, May 10 '21 at 16:41

score 0 · Answer 1 · answered May 10 '21 at 19:11

Not sure why you are doing it this way, how about

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

and then

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();
  }
},

How to get src from v-for looped element

1 Answers1