पास php चर vue घटक उदाहरण

Question

मैं एक चर के घटक को एक चर के मान को कैसे पास कर सकता हूं?

मेरे उदाहरण में, मैं एक इनलाइन टेम्पलेट क्लाइंट-विवरण, मैं laravel से इस दृश्य प्राप्त इसलिए अब मैं आईडी जो मेरे vue उदाहरण के लिए यूआरएल /client/1 के साथ आता है पारित करने के लिए चाहते हैं।

मेरे घटक है, जो 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 }" 

तरह की कोशिश की लेकिन यह काम नहीं करता ।

Answer 1

आपको मार्क के माध्यम से वू के घटकों के गुणों को पारित करने में सक्षम होने के लिए आपको Vue's props का उपयोग करना होगा। अपने Vue घटक में

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

: निम्न उदाहरण पर एक नजर डालें

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

अब आप अपने Vue घटक के अन्य भागों में, तो आप इस मूल्य this.clientId के रूप में उपयोग कर सकते हैं।

कृपया ध्यान दें कि HTML में हम कबाब-केस में विशेषता नाम लिखना लेकिन Vue पक्ष में हम CamelCase में लिखने। official docs here में अधिक जानकारी।

Answer 2

मैंने अभी यह किया है और यह मेरे लिए बहुत अच्छा काम कर रहा है। Laravel 5.4 और वू 2.x का उपयोग करना।

मेरी घटक में, वस्तु के लिए एक संपत्ति (सहारा) की घोषणा:

props: ['currentUser'],

मेरी ब्लेड पृष्ठ पर जहां घटक instantiated है:

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

ध्यान दें कि में घटक, मैं currentUser के लिए camelCase का उपयोग कर रहा हूं, लेकिन क्योंकि एचटीएमएल केस असंवेदनशील है, तो आपको कबाब-केस (इस प्रकार, 'वर्तमान-उपयोगकर्ता') का उपयोग करना होगा।

यह भी ध्यान दें, यदि आप ब्लेड सिंटैक्स {{ }} का उपयोग करते हैं तो डेटा के बीच php htmlspecialchars के माध्यम से चलाया जाता है। आप unencoded डेटा चाहते हैं (जो इस मामले में क्या तुम करोगी), तो का उपयोग {!! !!}

Answer 3

मैं अपने 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 initialisation में, मैं एक गणना संपत्ति डाल: फिर

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

, डेटा पहुँचा जा सकता है server_data.some_object के साथ घटक टेम्पलेट में।