59103


vue.jsを使ってhtmlのデータ属性のjsonを読み込もうとしているのですが、データ属性の値を取ってきて`JSON.parse`を適用すると以下のエラーが出ます。

[code]

    Unexpected token \ in JSON at position 1
    
[/code]

**index.html**

[code]

    <div id="app" data-servers="{\x22name\x22: \x22aaa\x22}">
        {{ servers }}
    </div>
    
[/code]

**app.js**

[code]

    const app = new Vue({
        el: '#app',
        data: () => {
            const servers = document.getElementById('app').dataset.servers;
            console.log(servers);
            return {
                servers: JSON.parse(servers)
            }
        }
    })
    
[/code]

普通のJavaScriptではJSON.parseでエスケープ済みの文字列をパースできましたがvue.js上では動きません。

vue.jsでhtml上のjsonをパースするにはどのようにすればよいのでしょうか。


CC BY-SA 4.0
2019-09-16T15:14:03.347
59100
2019-09-16T17:04:36.460
7232
question
javascript vue.js
vue.jsのJSON.parseで\x22をパースできない。


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

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

[code]

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

あるいは、

[code]

    <div id="app" data-servers='{"name": "aaa"}'>
    
[/code]


CC BY-SA 4.0
2019-09-16T17:04:36.460
59103
2019-09-16T17:04:36.460
13972
59100
answer