如何处理 vue 组件中的错误？

Question

今天我发现了一个在 Chrome 中发生但在 Firefox 中运行良好的错误。这是一个像这样的上传组件：

<input type="file" v-on:change="upload($event)"/>

upload(e) {
  this.name = e.target.files[0].name;
  this.resultUrl = e.target.files[0];
}

我选择了一个文件，然后重新选择并取消，我发现页面停止了。更糟糕的是控制台没有任何错误消息。所以我必须猜测是什么导致了这个错误。
我使用过一段时间并意识到组件中可能存在错误。所以我在上传方法中添加了一个打印console.log(e.target.files)。正如我所例外，Chrome 的打印与 Firefox 的打印不同。 Chrome 有两个 print，而 Firefox 只有一个。这是 Chrome 的印刷品。

然后我发现了这个input type=“file”, clearing file after clicking cancel in chrome。我已经知道是什么导致了这个错误，并通过添加法官来修复它。
但这不是我第一次遇到页面停止，控制台上没有错误消息。那么vue组件发生的错误该如何抛出和处理呢？

Answer 1

要停止您的错误，您只需在执行.name 之前检查文件是否存在，因为如果不存在文件，您将在执行undefined.name 时收到错误消息。我根据您提供的代码在下面构建了一个小提琴。

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: "#app",
  data: () => {
    return {
      name: null,
      resultUrl: null
    }
  },
  methods: {
    uploadFile: function(ev) {
      let file = ev.target.files[0];

      if (!file) {
        this.name = null;
        this.resultUrl = null;
        return;
      }

      this.name = file.name;
      this.resultUrl = file;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="file" @change="uploadFile" />
</div>