0

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をパースするにはどのようにすればよいのでしょうか。

1 件の回答 1

0

HTML属性はJavaScriptではありませんから、\x22と言うのはエスケープでもなんでもなく、そのまま4つの文字\ x 2 2を表すだけになります。

例えば以下のようにしてみてください。

<div id="app" data-servers="{&#34;name&#34;: &#34;aaa&#34;}">

あるいは、

<div id="app" data-servers='{"name": "aaa"}'>
1
  • 1
    無理矢理やるならば、 servers.replace(/\\x22/g, '\x22') でも良いですね。
    – supa
    Commented 2019年9月16日 17:13

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。