Vue.js错误 "Cannot read property 'props' of undefined"

Question

我按照 GoRails 的教程操作了一遍，但出现了一些问题。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文件：

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
                })
            }
        }
    });
  }
});

据我理解，这是一个App对象初始化的错误，但我无法确定具体是哪个部分出了问题。我认为我已经按照要求正确地完成了初始化。

- mr.Zaur

---

我也遇到了这个问题，当我从vue-threejs中使用object3D作为mixin时会发生这种情况。当我尝试使用它时，它会失败，因为mixin是一个函数，没有任何选项属性。我认为这可能是vue框架中的一个bug。 - Matt Fenner

Answer 1

在混合中出现了错误：[TurbolinksAdapter]。

删除该行并在Vue.use(VueResource)之后添加Vue.use(TurbolinksAdapter)即可解决问题。

- mr.Zaur

---

这个更改在任何地方都有记录吗？我还遇到其他问题，我想知道我的设置是否过时了。 - Travis Smith

Answer 2

我通过在Vue混入数组中拼写变量错误而遇到了这个问题。

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

应该是

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

- Raymond Schweers

Answer 3

可能已经晚了而且这是谷歌显示的第二个答案，但我认为这会帮助某人！

如果有人因为provide/inject而遇到此问题，可能与vue2/vue3有关。我阅读了关于vue3中提供/注入的文章，并在我的vue2项目中使用了它。‍♂️

我在vue2中使用reactive如下：

import { reactive } from 'vue'

provide() {
  return {
    loadingState: new reactive(() => this.loadingState)
  }
}

后来将其更改为：

provide() {
  return {
    loadingState: this.loadingState
  }
}

- yashhy