v-forで繰り返し処理しようとしても定義されていないとエラーが出てしまう

Question

いつもお世話になります。
nuxt.jsでWebページの作成練習しています。
axiosでJSONを取得しv-forでリスト表示を行いたいと思っていますが、下記のようにエラーが出てしまいます。
エラーメッセージ

Property or method "lists" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. 

<template>
  <div>
    <section class="hero is-primary is-bold">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">
            nuxt v-for
          </h1>
          <h2 class="subtitle">
            nuxt v-for
          </h2>
        </div>
      </div>
    </section>
    <div class="container is-fluid">
      <div>
        <ul>
          <li v-for="list in lists" v-bind:key="list.id">
            {{ list.name }}{{ list.id }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    data() {
      list : []
    },
    created: function () {
      axios.get('1.json').then(function (response) {
        this.list = response.data
      }.bind(this)).catch(function (e) {
        console.error(e)
      })
    }
  }
</script>

お忙しいところ恐れ入りますがよろしくお願い申し上げます。

Answer 1

エラーの内容通り、listsは定義されていません。
listは定義されているようです。

data() {
  return {
    list : []
  };
},

Comments

[1042limit]

ご助言ありがとうございます。
```
<template>
<div>
<section class="hero is-primary is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">
nuxt v-for
</h1>
<h2 class="subtitle">
nuxt v-for
</h2>
</div>
</div>
</section>
<div class="container is-fluid">
<div>
<ul>
<li v-for="list in lists" v-bind:key="list.id">
{{ list.name }}{{ list.id }}
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
lists : []
},
created: function () {
axios.get('1.json').then(function (response) {
this.lists = response.data
}.bind(this)).catch(function (e) {
console.error(e)
})
}
}
</script>
```
としてみましたが
```
Property or method "lists" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
```
と表示されてしまいます。

[spookybird]

コード修正してみました。dataをfunctionで定義されているのにreturnしてないせいですかね。

[1042limit]

ご助言ありがとうございました。
無事解決できました。