Access prop in method with VueJS

Question

Access prop in method with VueJS

Navigation

#1 by (0 votes)

1

I'm passing% object_to% to a component and within this component I try to access past values:

<orders-list :orders="items"></orders-list>

Component array

<template>
  <div>
    <b-form-select
      v-model="filterChannel"
      :options="Array.from(
        new Set(
          orders.map(item => item.channel)
        )
      )"></b-form-select>
  </div>
</template>

<script>
    export default {
        props: ['orders'],
        ...
        created(){ console.log(this.orders); } // null
    }
</script>

I can not get all the information in the orders-list: but the console always sends me an error saying that it can not access the template method of map even rendering the items ... However, if I use only null I can see the null with all the requests inside.

How can I access a console.log(this) within a component's methods?

vue.js

asked by anonymous 15.01.2018 / 16:11

1 answer

Discover the format of files without extension Error with jQuery animated number counter

score 0 · Accepted Answer

Access to a prop exactly as you are doing, this.orders , eg:

...
methods: {
    get_orders: function() {
        return this.orders;
    }
},
...

As per comment I realized that these items came from an ajax request, which is asynchronous and has not yet been completed when rendering the component, I would say that the most correct solution will be:

<template>
  <div>
    <b-form-select v-if="orders != null"
      v-model="filterChannel"
      :options="Array.from(
        new Set(
          orders.map(item => item.channel)
        )
      )"></b-form-select>
  </div>
</template>

<script>
    export default {
        props: ['orders'],
        ...
        created(){ console.log(this.orders); } // null
    }
</script>

Note that I have added v-if="orders != null" so that this element ( b-form-select ) is only rendered when orders is no longer null .

DOCS

You can also start items as an empty array and so it is not necessary to put the condition that I proposed above, in the parent component you can:

<template>
    ...
    <orders-list :orders="items"></orders-list>
    ...
</template>

<script>
    export default {
        data() {
            return {
                items: [],
            }
        },
        ...
    }
</script>