Vue - Passing prop array through vue component causes not defined error

Question

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

Try changing props to props: { dates: { type: Object, required: true} } and see what happens. Also can you confirm dates object is being formed properly in parent component. — Varun Agarwal
– Varun Agarwal, Commented Oct 10, 2019 at 12:29

Ayrton · Accepted Answer · 2019-10-10 12:49:07Z

1

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

answered Oct 10, 2019 at 12:49

Ayrton

2,3131 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rargy Over a year ago

Thankyou! Idk wtf is wrong with my code but this works fine :)

Asim Khan · Accepted Answer · 2019-10-10 12:16:37Z

1

You need to define variables inside the data method to make it accessible in HTML part of vue component.

If data is coming from some backend like PHP, you can create a variable in data and assign it the value from backend.

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

and in mounted or whichever hook you are using to access the data

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

answered Oct 10, 2019 at 12:16

Asim Khan

2,05914 silver badges21 bronze badges

Comments

Qrzy · Accepted Answer · 2019-10-10 12:16:11Z

0

Try to put the server-rendered JS part (with the variables from PHP) before initializing Vue instance on chart_card.

OR

Template:

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

(I hope this h2 is just for debugging, since this will not render the list of dates, just some trash ;))

answered Oct 10, 2019 at 12:16

Qrzy

1867 bronze badges

Collectives™ on Stack Overflow

Vue - Passing prop array through vue component causes not defined error

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related