Vue - 通过 vue 组件传递 prop 数组会导致未定义的错误答案

【问题标题】：Vue - Passing prop array through vue component causes not defined errorVue - 通过 vue 组件传递 prop 数组会导致未定义的错误
【发布时间】：2020-02-07 20:57:05
【问题描述】：

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

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

我不明白为什么，因为我在道具中接收变量，我正在使用 laravel 顺便说一句。如果我在我的 app.js 文件的 vue 实例中引用它们，我可以使用这样的道具，但我无法将我的 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: {

    },
});

任何帮助都会很棒！谢谢你:)

【问题讨论】：

尝试将 props 更改为 props: { dates: { type: Object, required: true} } 看看会发生什么。您还可以确认dates 对象在父组件中正确形成。

标签： javascript php laravel vue.js vue-component

【解决方案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
]) }}"

【讨论】：

谢谢！ Idk wtf 我的代码有问题，但这很好用:)

【解决方案2】：

您需要在 data 方法中定义变量，以便在 vue 组件的 HTML 部分中访问它。

如果数据来自 PHP 等后端，您可以在 data 中创建一个变量，并为其分配来自后端的值。

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

在挂载或您用来访问数据的任何钩子中

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

【讨论】：

【解决方案3】：

尝试将服务器渲染的 JS 部分（使用 PHP 中的变量）在初始化 Vue 实例之前放在chart_card。

或

模板：

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

（我希望这个h2 只是为了调试，因为这不会呈现日期列表，只是一些垃圾;））

【讨论】：