显示多个文件名VueJS错误推送不是一个函数

Question

我不想在模板中显示多个文件名，我会这样做：

<div v-for="(image, index) in imagesReturn" :key="index">
<span>{{ image.name }}</span>
</div>
<div>
<generic-input
v-model="imagesReturn"
type="file"
multiple
@change="addFiles"
>
add files
</generic-input>
</div>
<script>
data() {
return{
imagesReturn: [];
}
}
methods: {
addFiles(e) {
let selectedFiles = e.target.files;
for (let img of selectedFiles) {
this.imagesReturn.push(img.name);
}
}
}
</script>

我想在数组imagesReturn中显示文件名，但当我在数组内部推送时出现错误this.imagesReturn.push不是函数我不知道为什么，我不能在模板中显示文件名称。谢谢。

Answer 1

js部分对我来说似乎很好。我想问题出在generic-input组件上。

通常，当出现错误something.push is not a function时，它总是意味着something不是数组。

由于imagesReturn是使用v-model的双向绑定，因此generic-input组件可能在安装后将imagesReturn从[]更改为''(空字符串(或null。

因此，我建议您在addFiles()中使用console.log(this.imagesReturn)来查看值何时更改(或watchimagesReturn(。

我不知道generic-input组件是属于UI框架还是自己创建的。如果属于UI框架，则需要仔细阅读有关@change="function(params)"事件的文档，尤其是其参数。如果它是自己编写的，则需要检查emit('change', value)时它将在组件中传递什么值。