526互联

SyntaxError: "undefined" is not valid JSON

发布时间 2023-09-27 19:51:17作者: Himmelbleu

今天在写一个组件的 prop 的时候，传递的一个 json 字符串，不知道为什么会报以下错误。

SyntaxError: "undefined" is not valid JSON

<SVG
  v-if="data.length"
  v-for="item in data"
  :width="item.width"
  :height="item.height"
  :content="item.notes"
  :view-box="item.viewBox"
  :attrs="item.attrs"></SVG>

后来才发现是因为传递的字符串本身就已经有双引号转义了，所以双引号下面再双引号就会出问题，如果平时这样写肯定 vscode 会告知我们，但是通过变量传递就不行，不会报错，你也不知道为什么，但是最终也可以被解析出来，但是控制台就是报错，编译不通过页面空白。

所以，在传递之前就需要给 JSON 字符串处理成一个对象传递下去。

<SVG
  v-if="data.length"
  v-for="item in data"
  :width="item.width"
  :height="item.height"
  :content="item.notes"
  :view-box="item.viewBox"
  add:[:attrs="JSON.parse(item.attrs)"></SVG>]:add