Question

我试图将日期数组传递给我的组件，但它不断抛出

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

我不明白为什么，当我在props中接收变量时，我使用laravel btw。如果我在app.js文件的vue实例中引用它们，则可以使用类似props的道具，但是我无法将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

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

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

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

以及在已安装的或用于访问数据的任何挂钩中

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

Answer 2

尝试以下操作：而不是为日期创建变量，请转到执行此操作的地方：

<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
]) }}"

Answer 3

尝试在chart_card上初始化Vue实例之前放置服务器渲染的JS部分（带有PHP的变量）。

OR

模板：

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

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

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

3 个答案: