VueJS घटक

मैं अपनी स्क्रिप्ट को साफ़ करने के लिए VueJS घटकों का उपयोग करना चाहता हूं। इसलिए मेरे पास प्रत्येक पृष्ठ के लिए एक घटक है जिसे मैं लार्वेल में लोड कर रहा हूं। सब कुछ ठीक काम करता है। लेकिन मुझे अपने मौजूदा स्क्रिप्ट तर्क को एक घटक में स्थानांतरित करने में समस्याएं हैं।VueJS घटक

main.js मेरे लिए

import HomeView from './components/HomeView.vue'; 
import IncidentView from './components/IncidentView.vue'; 

window.app = new Vue({ 
    el: '.content', 

    components: { 
     HomeView, IncidentView 
    }, 

    methods: { 

     // Init GIS 
     init: function() { 

      // Initialize GIS Map 
     initGISMap(this.$els.map); 
     }, 
    } 
(...) 
}

कुंजी window.app = new Vue... हिस्सा है:

यह वर्तमान स्क्रिप्ट प्रयोग की जाने वाली घटकों का आयात सेटअप है। मैं Google मानचित्र का उपयोग करता हूं और इसलिए जब पृष्ठ लोड होता है तो यह app.init विधि की खोज करता है।

<!DOCTYPE html> 
<html> 
<body class="hold-transition skin-blue sidebar-mini"> 
     <section class="content-header"> 
      <h1> 
       @yield('page_title') 
       <small>@yield('page_description')</small> 
      </h1> 
     </section> 

     <!-- Main content --> 
     <section class="content"> 

      @if (isset($vueView)) 
       <component is="{{ $vueView }}"> 
      @endif 
       @yield('content') 
      </component> 

     </section> 
     <!-- /.content --> 
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places&callback=app.init" async defer></script> 
</body> 
</html>

अलग-अलग पृष्ठों (जहां मैं हर Vue में एक मॉड्यूल के लिए बनाने के) इस तरह दिखेगा:

@extends('app', ['vueView' => 'home-view']) 
@section('page_title', 'title') 
@section('page_description', 'title') 

@section('content') 
content 
@endsection

vueView को परिभाषित करने से यह स्क्रिप्ट मैं ब्लेड खाके में लोड हो रहा है कर रहा हूँ का हिस्सा है परिवर्तनीय, सही स्क्रिप्ट जो मैं अपनी लिपि में आयात कर रहा हूं, का उपयोग किया जाता है।

लक्ष्य HomeView घटक का उपयोग मुख्य Google मानचित्र दृश्य के रूप में करना है। और मेरे विषय में संबंधित लिंक पर क्लिक करते समय अलग-अलग पृष्ठों के लिए अन्य घटक लोड करते हैं। अंत में, मैं एक स्क्रिप्ट में सभी VueJS कोड नहीं चाहता हूं। इसलिए मॉडल।

जब मैं इस वर्तमान जेएस फ़ाइल की सभी सामग्री को स्थानांतरित करता हूं, तो मुझे शिकायत होती है कि app.init कोई फ़ंक्शन नहीं है।

<script> 
export default { 
    data: { 
     // SEARCH 
     addressComponents: '', 
     autocompletePlace: '', 
     autocompleteAddress: '', 
(...) 
}

मैं एक तरह से मेरी घटक को कैसे संपादित कर, कि app.init लोड अभी भी काम करेगा: घटक इस तरह दिखता है?

स्रोत

2016-05-10 sesc360

किसी ने पहले से ही GuillaumeLeclerc/vue-google-maps का उल्लेख किया है जो vue-google-maps के रूप में एनपीएम पर उपलब्ध है, लेकिन चेतावनी दी जाती है कि वह संस्करण केवल 1 के साथ काम करता है।एक्स

यदि आप v2 का उपयोग कर रहे हैं, तो इस महान vue2 कांटा xkjyeah/vue-google-maps देखें - यह vue2-google-maps पर एनपीएम पर उपलब्ध है।

एपीआई सीधा है और v1 संस्करण से दूर नहीं है, और भंडार इसके अपस्टाम समकक्ष से कहीं अधिक सक्रिय है।

यह वास्तव में मेरे वू मानचित्र को अपना खुद का रोल करने से बहुत अधिक दर्द रहित बना देता है, जो मैं शुरू में कर रहा था।

मुझे उम्मीद है कि

स्रोत

2016-11-28 22:14:41

यदि मैं आपको सही समझता हूं, तो आपके पास Google मानचित्र स्क्रिप्ट है, जिसे लोड होने पर, window.app.init पर कॉल करें, है ना?

क्या आपके व्यू घटक में एक init() विधि है (कोई भी ऊपर दिखाया नहीं गया है)? यदि कोई था, तो उसे app.methods.init() पर होना चाहिए VueJS के लिए याद रखें, मानक कॉल करने योग्य विधियां विधियों की कुंजी के अंतर्गत रहती हैं।

वैकल्पिक रूप से: आप उल्लेख नहीं करते हैं कि आपका app.init वू घटक का हिस्सा है या नहीं। यदि ऐसा नहीं होता है तो ऐसा लगता है कि आपका app.init फ़ंक्शन ओवरराइड किया जा रहा है क्योंकि आप window.app को अपने vue घटक के रूप में फिर से परिभाषित कर रहे हैं।

आखिरकार, यदि आपका init Vue का हिस्सा है, तो क्या आपके Google नक्शे fn कॉलबैक इस init() को बुलाए जाने से पहले कॉल कर रहा है और इसलिए ऐसी कोई विधि मौजूद नहीं है (अभी तक)?

स्रोत

2016-05-10 15:30:04

हां में मदद करता है। मैं Google मानचित्र स्क्रिप्ट आयात कर रहा हूं और स्क्रिप्ट में window.app.init कॉल के माध्यम से पेज लोड पर इनिट विधि को लोड करने के लिए कहता हूं। मैंने init() विधि को जोड़ा है जो दुर्घटना से नहीं दिखाया गया था, लेकिन यह मौजूद है और मानचित्र से संबंधित सबकुछ ठीक से लोड करता है। सभी विधियां लाइव हैं और विधि कुंजी के भीतर काम कर रही हैं। लक्ष्य अब कोड को दोबारा करने के लिए है और लोड होने वाले "मुख्य" पृष्ठ में नक्शा व्यू है, मैं उस घटक को बनाना चाहता हूं जिसमें इस पृष्ठ के लिए आवश्यक सभी चीज़ें शामिल हों। एक और पृष्ठ में अलग-अलग सामग्री होगी और मैं वहां विभिन्न विधियों का उपयोग करना चाहता हूं। – sesc360

app.init घटकों का हिस्सा नहीं है। ये इस समय वर्णित की तरह दिख रहे हैं। दरअसल अभिव्यक्ति 'window.app = new Vue' मुझे सिरदर्द दे रही है कि मैं घटकों का सही तरीके से उपयोग कैसे करूं, इसलिए जब Google मानचित्र स्क्रिप्ट लोड हो जाती है, तो यह सही init विधि पाता है। – sesc360

तो मैं कैसे संरचित करता हूं कि यह Google नक्शे को स्टैंड-अलोन जेएस सेवा के रूप में सेट करना है, जिसे संभवत: अपने स्वयं के बनाए गए() लाइफसाइक्ल कॉलबैक में स्वयं कहा जाता है। इस तरह समन्वय पर आपके पास बेहतर नियंत्रण है। आपको ऐसा करने की ज़रूरत नहीं है, लेकिन अन्यथा आपको सबकुछ के समय को समन्वयित करना होगा जैसे कि वू घटक नक्शे से कॉलबैक से पहले कॉलबैक से पहले उपलब्ध है। वू के बनाए गए() और तैयार() लाइफसाइक्ल कॉलबैक में कंसोल के लिए एक नोट लॉगिंग करने और Google नक्शे में ऐसा करने के लिए यह देखने के लिए सुझाव दें कि आपके नक्शे आपके vue से पहले तैयार हैं या नहीं। –

शायद आपको उस पैकेज के उपयोग, या कम से कम कोड का अध्ययन करना चाहिए।

उदाहरण के लिए, आप Vue-google-नक्शे जांच कर सकते हैं Github पर: https://github.com/GuillaumeLeclerc/vue-google-maps/

यह गूगल मैप्स से संबंधित घटकों की एक पूरी बहुत कुछ परिभाषित करता है।

स्रोत

2016-05-10 15:52:16

VueJS घटक

उत्तर

संबंधित मुद्दे