【vueエラー】Error in v-on handler: “TypeError: Cannot create property

code

2022.12.03 2021.03.05

こんにちは、shinoです。毎日ボチボチプログラミングをしながら生活しています。その中での技術・エラーなどの紹介をしています。

今回は、vueのエラーを紹介していきます。簡単なものでも調べてみるとわかることも多くあるので一応備忘録としてどんどんエラーを載せておきます。

少しでもエラーの解決の手助けになればと思います。以前のエラーも少し関係があるので確認してみてもらうといいと思います。

今回の事象

vueの簡易アプリを作成している際に、上記のエラーが表示されました。簡単なエラーですのでちゃんと確認してみるといいと思います。

エラーとしては、以下のものが出ています。

Error in v-on handler: "TypeError: Cannot create property

1	Error in v-on handler: "TypeError: Cannot create property

該当コードがこれになります。

<template>
   <textarea id="memo" cols="30" rows="10" v-model="memo"></textarea>
</template>

</template>

<script>
export default 
data() {
     return {
         memo: {
             id: null,
             text: ""
         },
    }
}
</script>

export default

data() {

return {

memo: {

id: null,

text: ""

}

</script>

このエラーは、v-onを利用していますが、それがうまく動作していない状態です。

今回の場合は、v-modelのところがおかしくなっています。

v-modelの値がdata()に対応した値になっていないのでエラーが出ていますので、そこを対象の値が対象になるように調節します。

<template>
   <textarea id="memo" cols="30" rows="10" v-model="memo.text></textarea>
</template>

</template>

こうすることで、対象のデータを参照するようになるのでエラーが解決となります。

お疲れ様です。エラーは解決できたでしょうか？

他にもエラー情報等も掲載してあるので読んでみて下さい。

解決できなければ、公式を確認してみるのもいいと思います。

ひと休憩の際におすすめ記事は「【Nuxt.js】ローカル環境にてcorsの設定方法」です。時間があれば読んでみて下さい。