runtime-dom.esm-bundler.js:613 Uncaught (in promise) InvalidCharacterError: Failed to execute ‘setAttribute’ on ‘Element’: ‘0’ is not a valid attribute name. 错误原因

报错场景

本人在使用nuxt3项目的时候,出现如标题这样的报错信息。但个人感觉在前端开发时,都会出现类似的的错误。

这是报错的代码部分

//获取用户手册列表
const getUserManual = () => {
  const res = getClassifiedFile({
    params:{
      class_idx:[1]
    }
  });
  userManualList.value = JSON.parse(JSON.stringify(res.data.value.msg));
  umLength.value = userManualList.value.length;
  if(res.status.value == "error"){
    ElMessage.error("用户手册获取失败,请稍后再试");
  }else if(res.status.value == "success") {
    if (res.data.value.status == "1") {
      ElMessage.success(res.data.value.msg);
    } else ElMessage.warning(res.data.value.msg);
  }
}

报错信息

runtime-dom.esm-bundler.js:613  Uncaught (in promise) InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.    at patchAttr (runtime-dom.esm-bundler.js:613:10)    at patchProp (runtime-dom.esm-bundler.js:786:5)    at mountElement (runtime-core.esm-bundler.js:4813:11)    at processElement (runtime-core.esm-bundler.js:4760:7)    at patch (runtime-core.esm-bundler.js:4628:11)    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5266:11)    at ReactiveEffect.run (reactivity.esm-bundler.js:222:19)    at setupRenderEffect (runtime-core.esm-bundler.js:5394:5)    at mountComponent (runtime-core.esm-bundler.js:5169:7)    at processComponent (runtime-core.esm-bundler.js:5122:9)

在这里插入图片描述

分析和解决方案

​ 我所对接的后端的相应格式如下:

//失败时
{
    status:0,
    msg:"获取失败!"
}
//成功时

{
    status:1,
    msg:[
        {
         id:0,
         name:"123"
        },
        {
         id:2,
         name:"456"  
        }
    ]
}

让我习惯性的使用如下代码来显示提示框:

ElMessage.success(res.data.value.msg);

让我习惯性的使用如下代码来显示提示框:

ElMessage.success(res.data.value.msg);

导致当成功获取的时候,返回来的是一个对象,而不是一个字符串,所以当成功获取的时候把这条代码删掉即可!!

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐