Why am I unable to access vue.js props from another component?

Question

var v_root = new Vue({
    delimiters: [ '[[', ']]' ],
    el: '#vue-main',
    data: {
        jobs: [],
        report_links: '{{ report_links }}',
    },
    mounted: function() {
      console.log(this.report_links);
      <-- this logs the expected data-->>
    },


Vue.component('overview', {
    delimiters: [ '[[', ']]' ],
    props: ['jobs', 'report_links'],
    mounted: function() {
      console.log(this.report_links);
      <-- this logs 'undefined' -->
      console.log(this.jobs)
      <-- this logs jobs as expected-->>
    },

Why am I able to access jobs from my component but not report_links?

Not sure if it matters but report_links should return ['test1', 'test2']

Can you share a codepen or jsfiddle?

grmdgs
– grmdgs

2019-06-05 17:59:01 +00:00
Commented Jun 5, 2019 at 17:59 — grmdgs
– grmdgs, Commented Jun 5, 2019 at 17:59

Matt Oestreich · Accepted Answer · 2019-06-12 01:17:56Z

Looks like you figured this out in the time I was able to type this up.. For what it's worth:

[CodePen Mirror]

var v_root = new Vue({
    el: '#vue-main',
    data: {
        jobs: ["job1","job2"],
        report_links: '{{ report_links }}',
    },
    mounted: function() {
      console.log(this.report_links);
      //<-- this logs the expected data-->>
    },
})


Vue.component('overview', {
    delimiters: [ '[[', ']]' ],
    props: ['jobs', 'report_links'],
    mounted: function() {
      console.log(this.report_links);
      //<-- this logs 'undefined' -->
      console.log(this.jobs)
      //<-- this logs jobs as expected-->>
    },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<div id="vue-main">
  <overview 
    :jobs="jobs"
    :report_links="report_links">
  </overview>
  
  <ul>
    <li v-for="(job, index) in jobs" :key="index">
    {{ job }}
    </li>
  </ul>
  <div>
  {{ report_links }}
  </div>
</div>

david · Accepted Answer · 2019-06-05 18:58:48Z

1

I forgot to pass the report_links like so:

 <overview :jobs=jobs :report_links=report_links></overview>

this fixed.

answered Jun 5, 2019 at 18:58

david

6,89517 gold badges60 silver badges98 bronze badges

Collectives™ on Stack Overflow

Why am I unable to access vue.js props from another component?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related