Vue中如何获取循环迭代的Model值，将文档URL传递给下载函数

方法一：直接传递URL参数（最推荐） #

你不需要通过DOM属性传值，Vue模板内可以直接把当前迭代项的url作为参数传给下载函数，逻辑更简洁也不会出现DOM指向异常的问题：

1. 修改按钮的点击事件绑定：

<v-btn
  elevation="2"
  small
  raised
  rounded
  @click="downloadItem(item.url)"
>
  <v-icon dark>mdi-download-circle</v-icon>
</v-btn>

2. 调整下载函数直接接收参数即可：

function downloadItem(url) {
  downloadUrl.value = url;
  console.log('triggerd: ', downloadUrl);
  // 补充下载触发逻辑
  const downloadLink = document.createElement('a');
  downloadLink.href = url;
  downloadLink.download = ''; // 可自定义文件名，留空则使用服务端返回的默认文件名
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
}

方法二：通过DOM属性获取（仅适合必须通过DOM传值的场景） #

你之前拿不到值有两个原因：

• 点击事件的target可能指向按钮内部的<v-icon>子元素，不是绑定事件的<v-btn>本身
• v-btn的value是组件专属prop，默认不会挂载到原生DOM节点上
  调整方式如下：

1. 给按钮绑定自定义data属性：

<v-btn
  elevation="2"
  small
  raised
  rounded
  :data-url="item.url"
  @click="downloadItem($event)"
>
  <v-icon dark>mdi-download-circle</v-icon>
</v-btn>

2. 修改下载函数，使用currentTarget获取绑定事件的对应节点：

function downloadItem(e) {
  // currentTarget始终指向绑定了点击事件的v-btn原生DOM节点
  downloadUrl.value = e.currentTarget.dataset.url;
  console.log('triggerd: ', downloadUrl);
  // 同上补充下载触发逻辑
}

内容的提问来源于stack exchange，提问作者LaFllamme