Nuxt：数据未从页面传递到组件

Question

我正在尝试将数据从nuxt页面传递到组件。

[数据在asyncData函数内的页面组件内部检索。然后通过道具传递到组件。

在子组件中，我正在检查watch块内的prop值。设置了deep和immidiate。所有这些即使在生产模式下也可以在本地正常运行。但是当部署到服务器时，我在子组件中获得了prop的默认值。两种环境之间的唯一区别是nuxt服务器是通过生产系统上的apache2代理服务的。

此外，这种完全相同的逻辑也适用于目录嵌套最多为两个的页面。

Answer 1

解决此问题的一种方法是仅在这样加载数据时才呈现组件：

new Vue({
    el: '#app',
    data() {
        return {
            dataLoaded: false,
            myData: []
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData() {
            setTimeout(() => {
              this.myData = ['hello', 'world']
              this.dataLoaded = true
            }, 2000)
        }
    }
})

<div id="app">
    <div>
        <div v-if="dataLoaded">
            <ul>
                <li v-for="item in myData">
                    {{ item }}
                </li>
            </ul>
        </div>
        <div v-else>
            <p>Loading data...</p>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>