Javascript Vue-通过Vue组件传递prop数组会导致未定义错误

我试图将一组日期传递给我的组件，但它一直抛出

[Vue warn]: Property or method "dates" is not defined on the instance
   but referenced during render

我不明白为什么，因为我在道具中接收变量，所以我使用了laravel btw。 如果我在我的app.js文件的vue实例中引用它们，我可以使用这样的道具，但我无法将我的php变量放入该文件中，因此没有意义

基础：

HTML:

组件：

模板：

<div v-if="dates" class="chart_card">
    <h2>{{ dates }}</h2>
</div>

Vue实例启动：

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');



window.Vue = require('vue');

import Vue from 'vue';

import InstantSearch from 'vue-instantsearch';

Vue.use(InstantSearch);

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));


// DASHBOARD
Vue.component('linegraph', require('./components/dashboard/line_graph.vue').default);

/**
 * 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.
 */

const app = new Vue({
    el: '#app',
    data: {

    },
});

/**
*首先，我们将加载该项目的所有JavaScript依赖项
*包括Vue和其他库。这是一个很好的起点
*使用Vue和Laravel构建健壮、功能强大的web应用程序。
*/
需要（'./引导'）；
window.Vue=require（'Vue'）；
从“Vue”导入Vue；
从“vue InstantSearch”导入InstantSearch；
Vue.use（InstantSearch）；
/**
*以下代码块可用于自动注册您的
*Vue组件。它将递归扫描此目录以查找Vue
*组件，并使用其“basename”自动注册它们。
*
*例如../components/ExampleComponent.vue->
*/
//const files=require.context（'./'，true，/\.vue$/i）；
//files.keys（）.map（key=>Vue.component（key.split（'/'）.pop（）.split（'.'）[0]，files（key.default））；
//仪表板
组件（'linegraph'，require（'./components/dashboard/line_graph.Vue'）。默认值）；
/**
*接下来，我们将创建一个新的Vue应用程序实例并将其附加到
*这一页。然后，您可以开始向该应用程序添加组件
*或者定制JavaScript框架以满足您的独特需求。
*/
const app=新的Vue({
el:“#应用程序”，
数据：{
},
});

---

任何帮助都将是惊人的！谢谢：）

在

图表卡上初始化Vue实例之前，尝试将服务器呈现的JS部分（带有PHP中的变量）

或

模板：

<div v-if="dates" class="chart_card">
    <h2>{{ dates }}</h2>
</div>


{{dates}}

（我希望这个
h2
只是为了调试，因为它不会呈现日期列表，只是一些垃圾；）
您需要在数据方法中定义变量，以便在vue组件的HTML部分中访问它

如果数据来自某个后端（如PHP），则可以在数据中创建一个变量，并从后端为其赋值

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

和挂载的或任何你用来访问数据的钩子

methods: {
  fetchData (datesFromBK) {
    this.dates = datesFromBK
  }
}

尝试以下操作：与其为日期创建变量，不如到您执行此操作的地方：

<div class="graph">
    <linegraph :dates="dates"></linegraph>
</div>

尝试将props更改为
props:{dates:{type:Object，required:true}
，看看会发生什么。您还可以确认父组件中的
日期
对象正在正确形成。谢谢！Idk wtf与我的代码有误，但这可以正常工作：）
data () {
  return {
    dates: []
  }
},

methods: {
  fetchData (datesFromBK) {
    this.dates = datesFromBK
  }
}

<div class="graph">
    <linegraph :dates="dates"></linegraph>
</div>

:dates="{{ json_encode([
    'monday' => $monday,
    'tuesday' => $tuesday,
    'wednesday' => $wednesday,
    'thursday' => $thursday,
    'friday' => $friday,
    'saturday' => $saturday,
    'sunday' => $sunday
]) }}"