あきぞらです。
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>
これでうまくいきました!
同じようなエラーが表示された人は、試してみてください。