Laravel 5.5 和 Vue.js

Question

我已經閱讀了很多文檔和教程，但我仍然不明白我做錯了什么。 我曾多次嘗試重建簡單組件，但沒有成功。 我收到以下錯誤：

[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>

這是我的app.js文件：

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: []
    }
});

這是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>

我知道我可能將.vue文件與我試圖在app.js中設置的一些屬性混淆了——誰能直接告訴我應該如何訪問數據？

Answer 1

更改Products.vue從：

data: function () {
   return products
},

至

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

在 Vue Root 對象或組件中設置 data() 對象時存在差異。

在您的情況下，您不應該將return products放在app.js中。 products對象將存在於Products.vue組件中，並且可以通過this.products訪問。