屬性或方法未在實例上定義，但在渲染期間被引用

Question

錯誤和背景

我在使vue.js在Laravel應用程序中工作時遇到一些問題。 每當我運行gulp時都沒有錯誤，因此我知道我的組件正在編譯。 每當我嘗試渲染組件時，它只會在運行時發生。

這是已記錄的完整錯誤：

Property or method "clients" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in component <clients>)

package.json文件定義為

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-11",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-loader": "^8.3.0",
    "vue-resource": "^1.0.3",
    "babel-core": "^6.8.0",                                                                                                                 
    "babel-loader":"^6.2.4",                                                                                                              
    "babel-plugin-transform-runtime":"^6.8.0",                                                                                           
    "babel-preset-es2015": "^6.6.0",                                                                                                       
    "babel-runtime":"^6.0.0",                                                                                                             
    "vue-hot-reload-api":"^1.2.0",
    "vue-html-loader":"^1.0.0"
  }
}

我已經嘗試了此 GitHub問題中概述的步驟，但沒有成功。 我也刪除了node_modules並運行了npm cache clean 。 無濟於事。

應用程序

import Clients from './Clients.vue';

export default {
    mounted() {
        console.log('Component ready.')
    },
    components: [
        Clients
    ]
}

客戶

import Client from './Client.vue'

export default {
    data() {
        return {
            clients: []
        }
    },
    components: [
        Client
    ],
    mounted() {
        this.$http.get('api/clients').then((response) => {
            this.clients = response.body
        })
    }
}

app.js

require('./bootstrap');

Vue.component('app', require('./components/Application.vue'));
Vue.component('clients', require('./components/Clients.vue'));
Vue.component('client', require('./components/Client.vue'));

Answer 1

我的猜測是您的問題在這里：

components: [
    Client
],

組件應該是一個對象，而不是數組：

components: {
    Client
},

對我來說，其他一切都很好。