【Vueエラー】data functions should return an object:

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

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

今回の事象
エラー内容
エラー解説
エラー解決策
最後に

今回の事象

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

エラー内容

以下のエラーが表示されました。

data functions should return an object:

1	data functions should return an object:

エラー解説

読んでもらうとわかるように、dataの内容が含まれていないためにエラーが出ています。

このエラーが出るのは以下のような状態です。

<script>
import memo from './memo.vue'
export default {
  name: 'HelloWorld',
  components: {
    memo
  },
  data () {
  }
}
</script>

import memo from './memo.vue'

export default {

name: 'HelloWorld',

components: {

memo

data () {

}

</script>

data()内が空白になっているので、エラーになっています。

エラー解決策

data()をとりあえず使わないのであれば、data()ごと消してしまえばエラーは消えます。

もしくは、何かをdata内に設定すれば問題ないです。

以下のような感じです。templateに{{msg}}を追加していればエラーが出なくなります。

<script>
import memo from './memo.vue'
export default {
  name: 'HelloWorld',
  components: {
    memo
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

import memo from './memo.vue'

export default {

name: 'HelloWorld',

components: {

memo

data () {

return {

msg: 'Welcome to Your Vue.js App'

}

</script>

最後に

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

私は、とりあえずdataを設定しようかと考えていたので入れてしまっていたのですぐに値を入れて解決しました。

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

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

Vue.js

Vue.js - The Progressive JavaScript Framework

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