Vue如何将索引从v-for发送到方法答案

【问题标题】：Vue how to send index from v-for to methodVue如何将索引从v-for发送到方法
【发布时间】：2020-12-01 18:59:27
【问题描述】：

我正在尝试传递 v-for 的索引，以便我可以更改一些值，我正在动态添加医生团队成员，并且我有这个文件输入来添加他们的图像，尽管当我添加医生时它只是更改第一个图像，因为它总是发送第一个医生的索引，如果有帮助，文件输入在 v-for 循环内。

<v-file-input
    hide-input 
    class="d-none" 
    id="doctorImage"
    truncate-length="1" 
    @change="doctorImage($event, index, doctor)"
></v-file-input>

方法：

doctorImage(e, index, doctor) {
    console.log(index)
    this.doctors[index] = {
        image: URL.createObjectURL(e),
        imageData: e,
        name: doctor.name, 
        specialty: doctor.specialty
    }
    this.doctorChange += 1   
}

索引总是0，虽然我在医生卡上动态创建时显示索引号，为什么会这样？

【问题讨论】：

您需要在 sn-p 中包含您的v-for

标签： javascript vue.js

【解决方案1】：

使用 v-for 引用 List Rendering。

<div ... v-for="(doctor, index) in doctors" ... >
  {{ index }} // you can use index
  ...
</div>

【讨论】：

【解决方案2】：

好的，所以我解决了这个问题，因为我有一个医生图像的标签，并且文件输入 id 也是在 v-for 语句中的医生图像，这产生了多个相同的 id 并产生了冲突。

【讨论】：

【解决方案3】：

我有一个限制迭代。例子如果数据是：

{
    limit: 3,
    currentIndex: 2,
    listData:[{name:'Data1'},{name:'Data2'},{name:'Data3'},{name:'Data4'},{name:'Data5'}]
}

在 .vue 文件中会如下所示

<span v-for="index in limit" v-bind:key="index">
   {{listData[index+currentIndex].name}}
</span>

我确保您控制总和 index + currentIndex 不超过您的数据限制

【讨论】：