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"
  }
}

我已经尝试了this GitHub问题中列出的步骤，但它没有用。我还删除了node_modules并运行了npm cache clean。无济于事。

Application.vue

import Clients from './Clients.vue';

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

Clients.vue

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
},

其他一切看起来都不错。

未在实例上定义属性或方法，但在呈现期间重新引用

1 个答案: