Я пытаюсь передать данные php / laravel моему компоненту из пользовательской глобальной переменной. Я видел примеры этого, попадающего в область new Vue({}) напрямую, но я не видел способа передать это, войдя прямо в компонент

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

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

Я должен указать, что у меня есть item-data в моем компоненте реквизита. Проблема в том, что я не уверен, как сообщить html моего компонента, что я передаю значение переменной itemData, а не строку "itemData"

2
kilrizzy 18 Дек 2015 в 00:12

3 ответа

Лучший ответ

Я думаю, что вы имеете в виду динамический реквизит

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

Или используйте сокращенный синтаксис

<custom-component :item-data="ITEMDATAVAR"></custom-component>
3
tasos neten 19 Дек 2015 в 01:15

Вы должны добавить item-data в props подобный массив :

Vue.component('custom-component', {

  props: ['item-data'],

  ...

}
1
Pantelis Peslis 17 Дек 2015 в 21:53

Вы можете исследовать этот Vue.js пример.

Создать переменную

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

В вашем компоненте вы должны написать о реквизитах

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

Передайте данные компоненту таким же образом

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

Я не проверял, как это будет работать, руководствуясь документацией.

1
theodor 17 Дек 2015 в 21:58