v-for 方法未收到正确的索引

Question

这是我的代码：

<b-form @submit="onSubmit" @reset="onReset" >
<b-card  v-for="(item, index) in items" :key="item.name">
<input type="file" 
style="visibility:hidden;" 
id="file" 
ref="file" 
@click="printIndex(index)" @change.once="handleFileUpload($event.target,$event.target.files)"                           
/>
{{index}}                   
</b-card>
</b-form>

我的型号：

items: [{
name: "soldat",
margin: 3,
labour: 2,
finition: 1,
demandMax: 40,
demandMin: 0
},
{
name: "train",
margin: 2,
labour: 1,
finition: 1,
demandMax: 800,
demandMin: 0
}
]

printIndex((函数只打印0，而当我点击第二个显示的输入对象时，它应该打印1。｛｛index｝｝在第二个对象(火车(上正确显示1。这就像INPUT不能访问INDEX变量一样，因为它是一个v-for。你试验过同样的行为吗？

修改后的vue代码如下：

<b-card  v-for="(item, index) in items" :key="item.index" @click="printIndex(index)">
<input type="file" 
style="visibility:hidden;" 
id="file" 
ref="file" 
@change.once="handleFileUpload($event.target,$event.target.files)"
/>                   
</b-card>

printIndex((在单击INPUT时被触发2次，第二次也给出0，而在单击我的第二个对象时它应该只显示索引1，就像在angularJs中一样。

我没有解决办法，我是金发碧眼。如果有人能找到解决方案，我将不胜感激。

这是printIndex方法：

printIndex(index){
console.log(index)
}

编辑：对不起，有些代码丢失了，添加了@change。我怀疑@change和@click之间存在冲突

编辑2:

<input v-model="index" @click="printIndex(index)"></input>

在v-for循环中工作得很好，错误似乎与类型="有关；文件"：这就是错误：

**File inputs are read only. Use a v-on:change listener instead.**

编辑3已解决，谢谢

我已经将printIndex((函数放置在标签中的隐藏按钮上方，如下所示：

<label for="file" class="btn btn-secondary btn-block"  @click="printIndex(index)">
<i class="fas fa-user-astronaut"></i>
<span class="d-none d-sm-block">Change picture</span>
</label>

<input
type="file"
style="visibility:hidden;"
id="file"
ref="file"
@change="handleFileUpload($event.target,$event.target.files)"
accept="image/*"
/>

主要的问题是输入类型＝"0"；文件"；是只读，因此您无法访问他的索引。

Answer 1

您的模型对象没有任何index属性，因此:key="item.index"是错误的。请改用:key="index"。。。

Answer 2

EDIT 3已解决，谢谢

我已经将printIndex((函数放置在标签中的隐藏按钮上方，如下所示：

<label for="file" class="btn btn-secondary btn-block"  @click="printIndex(index)">
<i class="fas fa-user-astronaut"></i>
<span class="d-none d-sm-block">Change picture</span>
</label>

<input
type="file"
style="visibility:hidden;"
id="file"
ref="file"
@change="handleFileUpload($event.target,$event.target.files)"
accept="image/*"
/>

主要的问题是输入类型＝"0"；文件"；是只读的，因此您无法访问他的索引。