Error in data(): "ReferenceError: progress is not defined" found in --->

I am new to vue.js and laravel. I have fetched the api data using api resource from laravel. I want to display the data in the vue.

I have created a table named 'progress' and seeded some data . I am fetching those datas in api resource named ProgressResource using vue template. This is my code.

app.js(Resources\js\app.js)

require('./bootstrap');

window.Vue = require('vue');

Vue.component('front-page', require('./components/Front.vue').default);

const app = new Vue({

      el: '#app',
});

Front vue(Resources\js\components)

<template>
<div>
    <h1> Goals </h1>

       <div class="progress" :id="progressdata.id">

         <ul  v-for = "progressdata in progress">
           <li> </li>
           <li> </li>
           <li> </li>
           <li class="value"> </li>
         </ul>
     </div>
</div>

</template>

<script>
  export default {

      data: function() {

            return {
              progress: [],
          }
        },


    mounted() {
       this.loadContents();
       this.start();

    },
    methods: {
      loadContents: function() {
           //load Api
           axios.get('/api/progress')
           .then((response) => {
               this.progress = response.data.data;
         })
         .catch(function (error) {
           console.log(error);
    });
  },
  start: function() {
        var  allProgressElements = document.getElementsByClassName('progress');
       Array.prototype.forEach.call(allProgressElements, function(el) {
       var targetDOM = $(el).getElementsByClassName('value');
       targetDOM.innerHTML = json.data[targetDOM.id].value;
       });
       }
}
}
</script>

Progress.blade.php

     <div id ="app">
      <front-page ></front-page>
      </div>

this is error

 Error in data(): "ReferenceError: progress is not defined"

found in

---> <FrontPage> at resources/js/components/Front.vue
       <Root>
warn @ app.js:20342
logError @ app.js:21601
globalHandleError @ app.js:21596
handleError @ app.js:21556
getData @ app.js:24455
initData @ app.js:24410
initState @ app.js:24349
Vue._init @ app.js:24708
VueComponent @ app.js:24855
createComponentInstanceForVnode @ app.js:22998
init @ app.js:22829
createComponent @ app.js:25681
createElm @ app.js:25628
createChildren @ app.js:25756
createElm @ app.js:25657
patch @ app.js:26217
Vue._update @ app.js:23654
updateComponent @ app.js:23775
get @ app.js:24186
Watcher @ app.js:24175
mountComponent @ app.js:23782
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:28752
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:31652
Vue._init @ app.js:24720
Vue @ app.js:24786
./resources/js/app.js @ app.js:31766
__webpack_require__ @ app.js:20
0 @ app.js:31891
__webpack_require__ @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
app.js:21605 ReferenceError: progress is not defined
    at VueComponent.data (app.js:1932)
    at getData (app.js:24453)
    at initData (app.js:24410)
    at initState (app.js:24349)
    at VueComponent.Vue._init (app.js:24708)
    at new VueComponent (app.js:24855)
    at createComponentInstanceForVnode (app.js:22998)
    at init (app.js:22829)
    at createComponent (app.js:25681)
    at createElm (app.js:25628)
logError @ app.js:21605
globalHandleError @ app.js:21596
handleError @ app.js:21556
getData @ app.js:24455
initData @ app.js:24410
initState @ app.js:24349
Vue._init @ app.js:24708
VueComponent @ app.js:24855
createComponentInstanceForVnode @ app.js:22998
init @ app.js:22829
createComponent @ app.js:25681
createElm @ app.js:25628
createChildren @ app.js:25756
createElm @ app.js:25657
patch @ app.js:26217
Vue._update @ app.js:23654
updateComponent @ app.js:23775
get @ app.js:24186
Watcher @ app.js:24175
mountComponent @ app.js:23782
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:28752
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:31652
Vue._init @ app.js:24720
Vue @ app.js:24786
./resources/js/app.js @ app.js:31766
__webpack_require__ @ app.js:20
0 @ app.js:31891
__webpack_require__ @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
app.js:20342 [Vue warn]: Property or method "id" 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. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <FrontPage> at resources/js/components/Front.vue
       <Root>
warn @ app.js:20342
warnNonPresent @ app.js:21755
get @ app.js:21810
render @ app.js:19564
Vue._render @ app.js:23259
updateComponent @ app.js:23775
get @ app.js:24186
Watcher @ app.js:24175
mountComponent @ app.js:23782
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:28752
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:31652
init @ app.js:22833
createComponent @ app.js:25681
createElm @ app.js:25628
createChildren @ app.js:25756
createElm @ app.js:25657
patch @ app.js:26217
Vue._update @ app.js:23654
updateComponent @ app.js:23775
get @ app.js:24186
Watcher @ app.js:24175
mountComponent @ app.js:23782
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:28752
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:31652
Vue._init @ app.js:24720
Vue @ app.js:24786
./resources/js/app.js @ app.js:31766
__webpack_require__ @ app.js:20
0 @ app.js:31891
__webpack_require__ @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
Show 2 more frames
app.js:20342 [Vue warn]: Property or method "progressdata" 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. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <FrontPage> at resources/js/components/Front.vue
       <Root>
warn @ app.js:20342
warnNonPresent @ app.js:21755
get @ app.js:21810
render @ app.js:19567
Vue._render @ app.js:23259
updateComponent @ app.js:23775
get @ app.js:24186
Watcher @ app.js:24175
mountComponent @ app.js:23782
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:28752
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:31652
init @ app.js:22833
createComponent @ app.js:25681
createElm @ app.js:25628
createChildren @ app.js:25756
createElm @ app.js:25657
patch @ app.js:26217
Vue._update @ app.js:23654
updateComponent @ app.js:23775
get @ app.js:24186
Watcher @ app.js:24175
mountComponent @ app.js:23782
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:28752
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:31652
Vue._init @ app.js:24720
Vue @ app.js:24786
./resources/js/app.js @ app.js:31766
__webpack_require__ @ app.js:20
0 @ app.js:31891
__webpack_require__ @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
Show 2 more frames
app.js:20342 [Vue warn]: Error in render: "TypeError: Cannot read property 'id' of undefined"

found in

---> <FrontPage> at resources/js/components/Front.vue
       <Root>
warn @ app.js:20342
logError @ app.js:21601
globalHandleError @ app.js:21596
handleError @ app.js:21556
Vue._render @ app.js:23261
updateComponent @ app.js:23775
get @ app.js:24186
Watcher @ app.js:24175
mountComponent @ app.js:23782
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:28752
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:31652
init @ app.js:22833
createComponent @ app.js:25681
createElm @ app.js:25628
createChildren @ app.js:25756
createElm @ app.js:25657
patch @ app.js:26217
Vue._update @ app.js:23654
updateComponent @ app.js:23775
get @ app.js:24186
Watcher @ app.js:24175
mountComponent @ app.js:23782
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:28752
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:31652
Vue._init @ app.js:24720
Vue @ app.js:24786
./resources/js/app.js @ app.js:31766
__webpack_require__ @ app.js:20
0 @ app.js:31891
__webpack_require__ @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
Show 2 more frames
app.js:21605 TypeError: Cannot read property 'id' of undefined
    at Proxy.render (app.js:19567)
    at VueComponent.Vue._render (app.js:23259)
    at VueComponent.updateComponent (app.js:23775)
    at Watcher.get (app.js:24186)
    at new Watcher (app.js:24175)
    at mountComponent (app.js:23782)
    at VueComponent../node_modules/vue/dist/vue.common.dev.js.Vue.$mount (app.js:28752)
    at VueComponent../node_modules/vue/dist/vue.common.dev.js.Vue.$mount (app.js:31652)
    at init (app.js:22833)
    at createComponent (app.js:25681)

Could somebody please help me to fix this issue?

thank you.

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/30sSTqK
via IFTTT