使用道具沒有組件

我正在工作一個VueJS，我想將一個來自Laravel服務器的變量傳遞給VueJS。使用道具沒有組件

這裏是我的代碼：

<div v-for="team in championships.find((elem) => elem.championship == {{ $championship->id }}).teams" 
       v-cloak 
       :championship= {{ json_encode($championship) }} >

這是我重要的是有一個Vue的對象命名的冠軍，在VUE目前的冠軍，所以我可以循環的團隊：

<div v-for="team in championship.teams" ... >

但我知道如何在組件中做到這一點，props，但我不知道如何在沒有道具的情況下獲得Vue中的冠軍對象。在data，我不能讓它工作。

有什麼想法？

來源

2017-10-13 Juliatzin del Toro

裏面你<head>標記添加了「冠軍」屬性窗口對象是這樣的：

<script> 
window.championship = {{ $championship }}; 
</script>

在Vue的實例數據

那麼物體定義「冠軍」先前定義的屬性：

data: { 
    championship: championship 
}

來源

2017-10-14 01:48:19 enriqg9

是的，我知道我可以做到這一點，但我覺得它不那麼幹淨。我之前在做，但我希望能夠使用'v-bind'。看來這是不可能的，因爲我讀了答案。 –

@JuliatzindelToro我這樣做的小變量..但對於大量的數據，你總是可以向後端發出Ajax請求來獲取你的數據。 – enriqg9

我相信，如果您將Laravel作爲api服務器並將您的應用程序變爲「SPA」，將會輕鬆許多。

無論如何，當你包括你對象Vue.js模板語法只能工作到Vue公司的實例，它打算做什麼

要麼

Vue.component('someComponent',{ 
    template: `<h1>Hello</h1>` 
})

或

<template> 
    <h1>Hello</h1> 
</template> 
<script> 
    export default { 
    name: 'hello', 
    ... 
    } 
</script>

所以，直接將你的模板寫入Vue風格不會使它工作。但是，您仍然可以將$championship作爲javascript變量傳遞給前端，並使用vue.js來呈現數據。

<html> 
    <body> 
    <div id="app"></div> 
    </body> 
    <script> 
    var championComponent = Vue.component({ 
     template: ` 
     <div v-for="team in championship.teams"> 
      <span>{{ team }}</span> 
     </div> 
     `, 
     data: function() { 
     return { 
      championship: {{ json_encode($championship) }} // parse your champion data here 
     } 
     } 
    }); 
    var app = new Vue({ 
     el: "#app" 
    }); 
    </script> 
</html>

祝你好運！

來源

2017-10-14 02:10:03 daiyanze

mmm。很容易，我不知道，但很多工作，是的。我將不得不遷移所有身份驗證，角色，翻譯，路線等......毫無疑問，這將是一個很大的改進，但這是一項很多工作，所以很容易就不是正確的詞:) –

我想我我很清楚如何將您的$冠軍變量傳遞給前端。而且，將Vue樣式的html標籤直接寫入模板文件是沒有辦法的。 – daiyanze

使用道具沒有組件

回答

相關問題