Vue报错DOMException: String contains an invalid character

Question

Vue调用后台显示数据库数据总是显示DOMException: String contains an invalid character

调试显示为这一块代码，求如何解决

Answer 1

引自免费微信小程序：皆我百晓生

这个问题看起来是由于 Vue 在尝试更新某个元素的属性时遇到了无效字符。在调试信息中，我们看到错误发生在 patchAttr 函数中，这通常与 HTML 特性（attribute）处理有关。

要解决这个问题，我们需要找到包含无效字符的数据，并且修复它。首先，让我们检查一下可能导致这个错误的具体代码行：

// 图2中的代码
const xlinkNS = "http://www.w3.org/1999/xlink";
function patchAttr(el, key, value, isSVG, instance) {
  if (isSVG && key.startsWith("xlink:")) {
    // ...
  } else {
    const isBoolean = isSpecialBooleanAttr(key);
    if (value == null || (isBoolean && !includeBooleanAttr(value))) {
      el.removeAttribute(key);
    } else {
      el.setAttribute(key, isBoolean ? "" : value);
    }
  }
}

从错误堆栈来看，问题可能出在 setAttribute 或 removeAttribute 方法上。为了定位具体的问题，你需要做以下几个步骤：

1. 检查数据源：确保从后端获取到的数据没有包含任何非法或特殊字符。可以检查那些引发错误的字段，看看它们是否包含了像 <, >, ", ', & 这样的特殊字符，或者非 ASCII 字符。

2. 转义特殊字符：在将数据插入到模板之前，使用 Vue 的内置方法进行转义。例如，如果你使用的是字符串插值，可以这样操作：

   <div v-bind:title="escapeHTML(someDataFromDB)"></div>
   

   然后在 Vue 实例的方法中定义 escapeHTML：

   methods: {
     escapeHTML(str) {
       return str.replace(/[&<>"]/g, function(m) {
         return {
           '&': '&amp;',
           '<': '&lt;',
           '>': '&gt;',
           '"': '&quot;'
         }[m];
       });
     }
   },
   

3. 排除空值和布尔属性：对于空值和某些布尔属性，应该正确地处理它们。根据提供的代码片段，在 patchAttr 中，如果 value 是 null 或者是一个布尔值并且不在 includeBooleanAttr 的白名单内，那么会移除相应的特性。确保这个逻辑在实际应用中是正确的。

4. 排查 isSVG 和 key 判断：确认你在处理 SVG 元素时，键（key）的前缀是正确的，比如如果是 xlink:href，则应确保 key.startsWith("xlink:") 返回 true。

5. 使用开发者工具调试：在浏览器的开发者工具中，检查具体的元素和其属性，看是否有任何异常。这可以帮助你更准确地定位问题所在。

通过上述步骤，你应该能找到导致 DOMException: String contains an invalid character 错误的原因并解决它。如果还有其他疑问，或者仍然无法解决问题，请提供更多的上下文信息，比如涉及的 Vue 组件代码、渲染的模板以及后端返回的数据示例。