CODEWITHSUNDEEP
javascriptphplaravelvue.jsvue-component
rargy
rargy

Reputation: 129

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

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

Upvotes: 1

Views: 2860

Answers (3)

Ayrton
Ayrton

Reputation: 2303

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

Upvotes: 1

Asim Khan
Asim Khan

Reputation: 2039

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
  }
}

Upvotes: 1

Qrzy
Qrzy

Reputation: 186

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

Upvotes: 0

Related Questions