VUE 错误集锦

1、radio (单选按钮) 变为多选

  <div v-if="selectedFiles">
    <h3>文件夹中的pdf文件：</h3>
    <ul>
      <li v-for="(file, index) in selectedFiles" :key="index">
        <label>
          <input type="radio" :value="file" v-model="selectedPDFFile">
          {{ file.name }}
        </label>
      </li>
    </ul>
    <p v-if="selectedPDFFile">Selected file: {{ selectedPDFFile.name }}</p>
  </div>

JS
<script setup>

........
const selectedPdfFile = ref(null);
........
</script>

由于大小写没有注意，实际上没有定义这个变量，导致HTML部分radio没有绑定的对象，出现异常。

2、const files = event.target.files;

其中files是 FileList对象，包含多个File对象，每个 File 对象代表一个文件，具有以下属性：

• name: 文件的名称（一个字符串），不包含任何路径信息。
• size: 文件的大小（以字节为单位），表示为一个整数。
• type: 文件的 MIME 类型，表示为一个字符串（例如 image/jpeg，text/plain 等）。
• lastModified: 文件的最后修改日期和时间，表示为一个时间戳（自1970年1月1日以来的毫秒数）。

尽管 FileList 对象不是真正的数组，但它具有 length 属性，表示列表中的文件数量，并且你可以通过索引（例如 files[0]，files[1] 等）来访问每个 File 对象。然而，与真正的数组不同，FileList 对象没有数组的内建方法（如 push，pop，forEach，map 等）。如果你需要将 FileList 对象转换为真正的数组以使用数组方法，你可以使用 Array.from() 或扩展运算符（...），如下所示：

// 使用 Array.from()
const filesArray = Array.from(files);

// 使用扩展运算符
const filesArray = [...files];