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

Question

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

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

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

基地:

HTML:

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

JS:

var dates = {
        monday: '{{ $monday }}',
        tuesday: '{{ $tuesday }}',
        wednsday: '{{ $wednsday }}',
        thursday: '{{ $thursday }}',
        friday: '{{ $friday }}',
        saturday: '{{ $saturday }}',
        sunday: '{{ $sunday }}'
    }

组件:

模板:

    <div class="chart_card">
        <h2>{{ dates }}</h2>
        <div>
            <GChart
                :settings="{ packages: ['corechart'] }"
                type="LineChart"
                :data="chartData"
                :options="chartOptions"
            />
        </div>
    </div>

JS:

   export default {
    name: 'linegraph',
    props: ['dates'],
    data() {
      return {

        } 
    },
    components: {
        GChart
    },
    methods: {

    },
  };

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: {

    },
});

任何帮助都会很棒!谢谢 :)

Answer 1

试试这个:不要为你的日期创建一个变量，而是去你这样做的地方:

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

并将 :dates="dates" 替换为:

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