Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Error Vue.js "Cannot read property 'props' of undefined"

Did everything on gorails tutorial, but something wrong. error message in Chrome:

Uncaught TypeError: Cannot read property 'props' of undefined   
    at normalizeProps (vue.runtime.esm.js?ff9b:1291)   
    at mergeOptions (vue.runtime.esm.js?ff9b:1363)   
    at mergeOptions (vue.runtime.esm.js?ff9b:1372)   
    at Vue$3.Vue._init (vue.runtime.esm.js?ff9b:4268)   
    at new Vue$3 (vue.runtime.esm.js?ff9b:4384)  
    at HTMLDocument.eval (hello_vue.js?94ab:29)     
    at Object.t.dispatch (turbolinks.self-)   
    at r.t.Controller.r.notifyApplicationAfterPageLoad ...)   
    at r.t.Controller.r.pageLoaded (t...)   
    at turbolinks.self...  

Hello_vue file:

import Vue from 'vue'
import TurbolinksAdapter from "vue-turbolinks"
import VueResource from "vue-resource"

Vue.use(VueResource);

document.addEventListener('turbolinks:load', () => {

    Vue.http.headers.common["X-CSRF-Token"] = document.querySelector('meta[name="csrf-token"]').getAttribute("content");

  var element = document.getElementById("team-form")

  if(element != null){

    var team = JSON.parse(element.dataset.team);
    var players_attributes = JSON.parse(element.dataset.playersAttributes);
    players_attributes.forEach(function(player){
        player._destroy = null  
    })
    team.players_attributes = players_attributes;

    var app = new Vue({
        el: element,
        mixins: [TurbolinksAdapter],
        data: function(){
            return { team: team }
        },
        methods: {
            addPlayer: function(){
                team.players_attributes.push({
                id: null,
                name: "",
                _destroy: null
                })
            }
        }
    });
  }
});

as I understand, an error in the initialization of the App object, but I can not understand in what exactly. I kind of did it right.

like image 814
mr.Zaur Avatar asked Sep 15 '17 11:09

mr.Zaur


People also ask

Why is props undefined?

The "Cannot read property 'props' of undefined" error occurs when a class method is called without having the correct context bound to the this keyword. To solve the error, define the class method as an arrow function or use the bind method in the classes' constructor method.

What is Cannot read property of undefined?

The "Cannot read properties of undefined" error occurs when trying to access a property on an undefined value. You often get undefined values when: accessing a property that does not exist on an object. accessing an index that is not present in an array.

What is VUE test utils?

Vue Test Utils is the official unit testing utility library for Vue. js. This is the documentation for Vue Test Utils v1, which targets Vue 2 and earlier.


2 Answers

error in mixins: [TurbolinksAdapter]

removed that line and added Vue.use(TurbolinksAdapter); after Vue.use(VueResource); and it all worked

like image 184
mr.Zaur Avatar answered Sep 22 '22 05:09

mr.Zaur


I've got this issue by misspelling a variable in the Vue mixins array. for example:

import file from '../folder/with/file'
export default: {
    mixins: [
        fil
    ]
}

should be

import file from '../folder/with/file'
export default: {
    mixins: [
        file
    ]
}
like image 42
Raymond Schweers Avatar answered Sep 24 '22 05:09

Raymond Schweers