Javascript 如何根据错误向Vue组件中注入标记？

当我的Vue应用程序出现错误时，我想更改组件的标记

我知道您可以使用

errorHandler

功能在控制台中显示错误，代码如下：

Vue.config.errorHandler = function(err, vm, info) {
  console.log(`Error: ${err.toString()}\nInfo: ${info}`);
}

我还看到了一个名为

renderError

的方法，但从我看到的Vue文档来看，它所能做的就是将代码粘贴到页面上

const app = new Vue({
  el:'#app',
  renderError (h, err) {
    return h('pre', { style: { color: 'red' }}, err.stack)
  }
})

是否有一种方法可以利用此方法在页面上注入或更改标记。我想做的是在使用Vue时发生错误时插入错误模板

---

下面是一篇详细介绍上述示例的文章：

使用Vue进行此类错误处理可能是我想得太多了。最后，我在Vue组件中设置了一个数据属性，该属性将根据Ajax响应是否为200返回布尔值，然后使用v-if在模板中动态显示错误。

您不需要返回布尔值。使用布尔值进行错误处理通常是不好的做法。您需要依赖try-catch块和异常。例如，假设您使用axios进行http请求：

fetchItems: async function() {
  try {
    const { data } = await axios.get('https://someurl.com/items/');
    const items = data;
    this.items = items;
  } catch (error) {//Any status code above  the 200 range will throw an exception in axios.
    this.errorMessage = error.message;//use this.errorMessage in the template, declaratively.
  } finally {
    //Here you can do something, regardless if the request succeeded or not.
  }
}

---

这是一个更干净、更简单和防错误的方法。

我认为您不需要使用任何花哨的Vue特定功能来实现您想要的功能。我们在谈论什么错误？可能的AJAX失败？如果是这样，请将请求放在try-catch块中，如果引发异常，请在组件的状态中使用Error.message（一个特殊字段，如“errorString”），它将显示在标记中。是的，它用于Ajax失败。我可能想得太多了，用Vue来处理这种错误。最后，我设置了一个变量，该变量将根据Ajax响应是否为200返回布尔值，然后使用v-if在模板中动态显示错误。这样做有效，我们使用Axios，因此我可以使用您的实现。谢谢注意一些有趣的事情：什么时候使用“finally”子句？如果您有一些要打开和关闭的“加载器”，在请求期间，您可以在try子句中打开它，然后在finally子句中关闭它，因为它需要在成功和错误时停止。