【Vue】JSONファイルを読み込もうとしてError: "~~" is read-onlyのエラーが出た時の対処法

あきぞらです。

Vueをよく触ることがあります。

Vue.js（Nuxt.js）で開発をしていたら、

Chromeのコンソールに「Error: "~~" is read-only」のエラーが表示されていました。

今回はその解消方法について紹介していきます。

Error: "~~" is read-only エラー時のコード

Error: "~~" is read-onlyのエラーが発生したときのソースは、

以下のような実装でした。

JSONファイルを読み込んで出力させるようなコードを書こうとしていました。

<template>
    <div class="container">
        <div>
            <article class="content" v-html="data"></article>
        </div>
    </div>
</template>

<script>
export default {
    async asyncData () {
        const data = await import('~/assets/json/data.json')
        data = JSON.stringify(data)
        return { data }
    },
}
</script>

しかし、画面には何も表示されず、

Chromeのコンソールにはこんなエラーが表示されてしまいました。

client.js Error: "data" is read-only
    at _readOnlyError (readOnlyError.js?b1f8:2)
    ...
    ...
readOnlyError.js Uncaught (in promise) Error: "data" is read-only
    at _readOnlyError (readOnlyError.js?b1f8:2)
    ...
    ...

dataを別変数に格納することによって解決

エラー文を確認すると、dataを編集するのが良くなさそうだったので、

別変数postを作成して、そこに代入してから出力させてみることにしました。

<template>
    <div class="container">
        <div>
            <article class="content" v-html="post"></article>
        </div>
    </div>
</template>

<script>
export default {
    async asyncData ({ params }) {
        const data = await import('~/assets/json/data.json')
        // 変数postに代入して、返してあげる
        const post = JSON.stringify(data)
        return { post }
    },
}
</script>

これでうまくいきました！

同じようなエラーが表示された人は、試してみてください。