如何从 v-for 循环元素中获取 src答案

【问题标题】：How to get src from v-for looped element如何从 v-for 循环元素中获取 src
【发布时间】：2021-07-31 22:40:15
【问题描述】：

我正在循环一个元素：

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

单击此元素时我需要将单击的元素的 src 返回到名为 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();
  }
},

链接返回未定义

【问题讨论】：

像 vanilla js 应用程序这样的 DOM 操作在 Vue 中并不是一个好主意，而且主要是做错事的迹象。使用按钮而不是“a”，因为它不是链接。 @click="sourceReplace" 是不带参数调用方法的方式。 “this”不是您单击的元素，而是整个组件。没有“this.src”。要通过 src 使用@click="sourceReplace(file.src)" 并且您需要共享课程.files 数组和模板。
<a> 没有src 属性
@BülentAkgül 只是一个小小的挑剔，但这里的 @click="sourceReplace()" 语法本身并没有错。区别在于sourceReplace 告诉 Vue 直接绑定到方法，并将click 事件传递给它，而sourceReplace() 告诉 Vue 调用方法而不是绑定它，显式零参数。 (More details)

标签： javascript vue.js vue-component dom-events

【解决方案1】：

不知道你为什么要这样做，怎么样

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

然后

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

【讨论】：