Vue.js：同一页面上的组件更新作为 v-model 传递的错误数组

Question

我有一个 Dropzone 组件，它将文件数组作为模型，并在提交文件时将文件附加到数组中。如果在页面中使用一次，效果很好，但如果同一页面上有两个 Dropzone 组件，当我在第二个组件中上传文件时，第一个组件会更新，但第二个组件不会更新。

Dropzone.vue

<script setup lang="ts"

const files = defineModel<File[]>({
  required: true
})


const uploadFile = (event: any) => {
  const file = event.target.files[0]
  if (!file) {
    ...
  }
  files.value.push(file)
}

</script>

<template>
...
 <input
    id="dropzone-file"
    type="file"
    class="hidden"
    :accept="accept"
    @change="
      (e) => {
        uploadFile(e)
      }
    "
    @drop="
      (e) => {
        uploadFile(e)
      }
    "
  />
...
</template>

其他组件.vue

<template>
   <div>
      <Dropzone v-model="files" />
      <Dropzone v-model="files2" />
   </div>
        

</template>

<script setup lang="ts">

const files = ref<File[]>([])
const files2 = ref<File[]>([])
</script>

当我在第二个放置区上传文件时，它被附加到文件数组中。

Answer 1

模型引用的值应该更新，而不是改变：

files.value = files.value.concat(file);