CODEWITHSUNDEEP
javascriptvue.js
kilrizzy
kilrizzy

Reputation: 2943

Passing a global var to a vue component attribute

I'm trying to pass php/laravel data to my component from a custom global variable. I've seen examples of this going into the new Vue({}) area directly but I haven't seen any way to pass this by going into right into the component 

<script>
var itemData = //json object
</script>

<custom-component item-data="ITEMDATAVAR"></custom-component>

I should specify that I do have item-data in my component props. The issue is that I'm not sure how to tell my component's html that I'm passing the value of the variable itemData and not the string "itemData"

Upvotes: 2

Views: 1936

Answers (3)

tasos neten
tasos neten

Reputation: 136

I think you are referring to dynamic props

<custom-component v-bind:item-data="ITEMDATAVAR"></custom-component>

or use the shorthand syntax

<custom-component :item-data="ITEMDATAVAR"></custom-component>

Upvotes: 3

fedorshishi
fedorshishi

Reputation: 1477

You can research this Vue.js example

Create a variable

new Vue({
    el: '#el',
    data: yourJsonObject
})

In you component you have to write about props

Vue.component('custom-component', {
    props: ['item-data']
    ...
}

Pass the data to the component the same way

<custom-component item-data="ITEMDATAVAR"></custom-component>

I have not tested how it will work, guided by the documentation.

Upvotes: 1

pespantelis
pespantelis

Reputation: 15382

You should add the item-data to the props array like this:

Vue.component('custom-component', {

  props: ['item-data'],

  ...

}

Upvotes: 1

Related Questions