Question

我不知道我在哪里错了，但是它在我的控制台上显示：

TypeError：无法读取未定义的属性“ 0” 在VueComponent.selectFile（vSingleUpload.vue？cf02：23）

但是在我的用户界面中，它不会崩溃，也不会呈现任何错误。

    <template>
  <section>
    <v-content>
      <v-container>
        <v-form enctype="multipart/form-data">
          <v-file-input label="file input" type="file" @change="selectFile" ref="userFile"></v-file-input>
        </v-form>
      </v-container>
    </v-content>
  </section>
</template>

<script>
export default {
  data() {
    return {
      file: ""
    };
  },

  methods: {
    selectFile: function() {
      this.file = this.$refs.userFile.files[0];
    }
  }
};
</script>

<style lang="scss">
</style>

Answer 1

v-file-input不会公开files属性，因此this.$refs.userFile.files将是undefined。

您可以直接将文件作为参数传递给事件侦听器，如下所示：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
  methods: {
    selectFile (file) {
      console.log(file)
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://unpkg.com/@mdi/font@3.9.97/css/materialdesignicons.css" rel="stylesheet">
<link href="https://unpkg.com/vuetify@2.0.18/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.0.18/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-form enctype="multipart/form-data">
          <v-file-input label="file input" @change="selectFile"></v-file-input>
        </v-form>
      </v-container>
    </v-content>
  </v-app>
</div>

不需要ref，也不需要type="file"。

TypeError：尝试记录我的$ refs时无法读取未定义的属性“ 0”

1 个答案: