Laravel 5.5 和 Vue.js

Question

I've read quite a few docs and tutorials but I'm still not understanding what I'm doing wrong. I've tried rebuilding the simple component several times with no luck. I'm getting the following errors:

[Vue warn]: Error in data(): "ReferenceError: products is not defined"

found in

---> <Products> at resources/assets/js/components/Products.vue
       <Root>
app.js:19613:7
ReferenceError: products is not defined

[Vue warn]: Property or method "data" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Products> at resources/assets/js/components/Products.vue
       <Root>
app.js:19613:7
[Vue warn]: Error in render: "TypeError: _vm.data is undefined"

found in

---> <Products> at resources/assets/js/components/Products.vue
       <Root>

Here's my app.js file:

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('products', require('./components/Products.vue'));

const app = new Vue({
    el: '.main-container',
    data: {
        products: []
    }
});

and here's the Products.vue :

<template>
<div class="row">
    <div class="columns large-3 medium-6" v-for="product in data.products" :key="product.product_key">
            <div class="card">
            <div class="card-divider">
                @{{ product.title }}
            </div>
                <a :href="product.product_key" target="_blank"><img :src="product.image"></a>
            <div class="card-section">
                <p>@{{ product.product_description }}</p>
            </div>
        </div>
    </div>
</div>
</template>

<script>
    export default {
        data: function () {
            return products
        },
        mounted () {
            this.getProducts();
        },
        methods: {
            getProducts() {
                axios.get('/products/').then((response) => {
                this.products = response.data.results;
                }).catch( error => { console.log(error); });
            }
        }
    }
</script>

I know I've probably confused the .vue file with some of the properties I was attempting to set in the app.js -- can anyone set me straight on how the data should be accessed?

Answer 1

Change Products.vue from:

data: function () {
   return products
},

To

data() {
    return {
        products: [],
    }
}

There is a difference when it comes to setting the data() object when it's either in the Vue Root object or when it's in components.

In your case, you shouldn't put return products in app.js . The products object will exist in that Products.vue component and can be accessed by this.products .