vue.jsを使ってhtmlのデータ属性のjsonを読み込もうとしているのですが、データ属性の値を取ってきてJSON.parse
を適用すると以下のエラーが出ます。
Unexpected token \ in JSON at position 1
index.html
<div id="app" data-servers="{\x22name\x22: \x22aaa\x22}">
{{ servers }}
</div>
app.js
const app = new Vue({
el: '#app',
data: () => {
const servers = document.getElementById('app').dataset.servers;
console.log(servers);
return {
servers: JSON.parse(servers)
}
}
})
普通のJavaScriptではJSON.parseでエスケープ済みの文字列をパースできましたがvue.js上では動きません。
vue.jsでhtml上のjsonをパースするにはどのようにすればよいのでしょうか。