プログラミング

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

あきぞらです。

個人開発ですが、Vueを触ることがときどきあります。

Vue.js(Nuxt.js)でこんな実装をしていたら、Chromeのコンソールに「Error: "~~" is read-only」のエラーが。

<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>

JSONファイルを読み込んでとりあえず出力させてみたかったわけです。

しかし、画面には何も表示されず、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を編集するのが良くなさそうだったので、別変数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>

これでうまくいった!

-プログラミング
-,

Copyright© あきぞらブログ , 2020 All Rights Reserved Powered by AFFINGER5.