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

Question

我正在尝试传递 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，尽管当我在医生卡上动态创建索引时它显示索引号，为什么会发生这种情况？

Answer 1

请参阅使用 v-for进行列表渲染。

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

Answer 2

我用极限迭代。示例 如果数据是：

{

    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>

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

Answer 3

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