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

我用极限迭代。示例 如果数据是：{&nbsp; &nbsp; limit: 3,&nbsp; &nbsp; currentIndex: 2,&nbsp; &nbsp; listData:[{name:'Data1'},{name:'Data2'},{name:'Data3'},{name:'Data4'},{name:'Data5'}]}在 .vue 文件中，如下所示<span v-for="index in limit" v-bind:key="index">&nbsp; &nbsp;{{listData[index+currentIndex].name}}</span>我确保您控制总索引 + currentIndex不超过数据的限制

Answer 3

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