Home>
I am practicing web page creation with nuxt.js.
I want to get JSON with axios and display the list with v-for, but I get the following error.
Error message

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./code></pre>
<pre><code data-language = "JavaScript">&lt;template&gt;
  &lt;div&gt;
    &lt;section&gt;
      &lt;div&gt;
        &lt;div&gt;
          &lt;h1&gt;
            nuxt v-for
          &lt;/h1&gt;
          &lt;h2&gt;
            nuxt v-for
          &lt;/h2&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
    &lt;div&gt;
      &lt;div&gt;
        &lt;ul&gt;
          &lt;li v-for = "list in lists" v-bind: key = "list.id"&gt;
            {{list.name}} {{list.id}}
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
  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)
      })
    }
  }
&lt;/script&gt;


  • Answer # 1

    As per the error description,listsis not defined.
    listseems to be defined.

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

Related articles