I’m trying to pass an array of dates through to my component, but it keeps throwing
[Vue warn]: Property or method "dates" is not defined on the instance but referenced during render
I don’t understand why, as I’m receiving the variable in props, I’m using laravel btw. I can use props like this if I reference them in the vue instance on a my app.js file, but I cant get my php variables into that file so there’s no point .
Base:
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 }}' }
Component:
Template:
<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 instance startup:
/** * 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: { }, });
Any help would be amazing! Thankyou 🙂
Advertisement
Answer
Try this: rather than creating a variable for your dates, go to the place where you do this:
<div class="graph"> <linegraph :dates="dates"></linegraph> </div>
And replace :dates="dates"
with this:
:dates="{{ json_encode([ 'monday' => $monday, 'tuesday' => $tuesday, 'wednesday' => $wednesday, 'thursday' => $thursday, 'friday' => $friday, 'saturday' => $saturday, 'sunday' => $sunday ]) }}"