（我正在使用 vue 3）我將檔案從輸入檔案添加到陣列，然后我有條件地渲染這些檔案名。在 Chrome 上一切正常。問題是在使用 Mozilla Firefox 時。在此瀏覽器中，檔案陣列被最后添加的檔案覆寫，例如：
- 添加檔案-1 || 輸出：檔案-1
- 添加 file-1 和下一個 file-2 || 輸出：file-1 file-1（重復）。
在那里您可以查看和測驗此代碼：https
://codesandbox.io/s/elegant-poitras-exux2z?file=/src/App.vue
方法：
methods: {
addFile (file) {
this.form.files.push(file);
}}
資料結構：
data() {
return {
form: {
files: [],
}};},
輸出：
<div>
<input @input="addFile($event.target.files)" type="file" name="" id="">
<p v-for="file in form.files" :key="file">
{{ file[0].name }}
</p>
</div>
uj5u.com熱心網友回復：
為您解決問題
methods: {
addFile(file) {
this.form.files.push({ ...file });
}
}
原因是 - 好吧，我的理論是$event.target.files不是每次addFile($event.target.files)都呼叫一個新物件
如果您將代碼更改為
methods: {
addFile(file) {
if (this.form.files.length) {
console.log(this.form.files[0] === file)
}
this.form.files.push(file);
}
}
這在 Firefox 103 中記錄為真，但在 Firefox 104（開發版）中為假
另一種選擇
<p v-for="file in form.files" :key="file">
{{ file.name }}
</p>
methods: {
addFile(file) {
this.form.files.push(file[0]);
},
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/506934.html
標籤：javascript Vue.js 火狐 Vuejs3
上一篇：每次我在下面運行我的selenium檔案時，我一直有Traceback(最近一次呼叫最后一次)：錯誤。我怎樣才能解決這個問題？