將php變量傳遞給vue組件實例

在我的例子，我有內聯模板客戶的詳細信息，我從laravel這一觀點所以現在我想通過它自帶的URL /client/1我vue實例ID。

我的成分，這是由Laravel裝，看起來像：

<client-details inline-template> 
    <div id="client-details" class=""> 
      My HTML stuff 
    </div> 
</client-details>

，並安裝：

Vue.component('client-details', { 
    data(){ 
     return { 
      clientId: null 
     } 
    }, 
);

我已經嘗試過類似

:clientId="{{ $client->id }"

，但它不工作。

來源

2017-01-07 mastercheef85

您必須使用Vue的props才能通過標記將屬性傳遞給Vue的組件。看看下面的例子：

<client-details inline-template client-id="{{ $client->id }}"> 
    <div id="client-details" class=""> 
      My HTML stuff 
    </div> 
</client-details>

在你的Vue組件：

Vue.component('client-details', { 
    props: [ 
     { 
      name: 'clientId', 
      default:0, 
     } 
    ] 
});

現在，在您的Vue組件的其他部分，你可以this.clientId訪問此值。

請注意，在HTML我們寫在烤肉情況屬性的名稱，但在Vue公司方面，我們把它寫在駝峯。更多信息在official docs here。

來源

2017-01-07 11:02:30

非常感謝。 – mastercheef85

對此有何更改？我得到「[Vue警告]：使用數組語法時，道具必須是字符串」錯誤。編輯：通過替換道具解決：[「clientId」] – trinvh

我只是做了這個，它對我很好。使用Laravel 5.4和Vue 2.x.

在我的組件，申報對象的屬性（道具）：在

<my-component v-bind:current-user='{!! Auth::user()->toJson() !!}'></my-component>

需要注意的是：

props: ['currentUser'],

在我的刀片頁面，組件實例組件，我使用camelCase for currentUser，但由於html不區分大小寫，所以您必須使用kebab-case（因此，'current-user'）。

另請注意，如果您使用刀片語法{{ }}，那麼之間的數據將通過php htmlspecialchars運行。如果你想未編碼的數據（在這種情況下，你會），然後用{!! !!}

來源

2017-05-17 17:05:23 Hawkeye64

我有一些服務器的數據傳遞給我的Vue的組成部分，我結束了在控制器中創建一個$server_data變量，並傳遞給它一個JSON腳本標籤。

在控制器：

$server_data = json_encode([ 
    "some-data" => SomeObject::all() 
]); 

return View::make('myview', compact('server_data'));

在模板：

<script type="application/json" name="server-data"> 
    {{ $server_data }} 
</script> 
<!-- Inserts server data into window.server_data --> 
<script> 
    var json = document.getElementsByName("server-data")[0].innerHTML; 
    var server_data = JSON.parse(json); 
</script>

在VUE初始化，我把計算出的屬性：

computed: { 
    'server_data': function(){ 
     return window.server_data; 
    } 
}

然後，數據訪問在組件模板中使用server_data.some_object。

來源

2017-11-17 14:16:54 antoineMoPa

將php變量傳遞給vue組件實例

回答

相關問題