SyntaxError: "undefined" is not valid JSON

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

file:[console]
SyntaxError: "undefined" is not valid JSON

file:[Example.vue]
<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 字符串处理成一个对象传递下去。

file:[Example.vue]
<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