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.
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.
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.
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.
error in mixins: [TurbolinksAdapter]
removed that line and added Vue.use(TurbolinksAdapter); after Vue.use(VueResource); and it all worked
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
]
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With