VueJS 컴포넌트
VueJS 컴포넌트를 사용하여 스크립트를 정리합니다.그래서 저는 Larabel에 로드하는 페이지마다 컴포넌트를 가지고 있습니다.지금까지는 모든 것이 잘 작동한다.그러나 현재 스크립트 로직을 컴포넌트로 전송하는 데 문제가 있습니다.
사용하는 컴포넌트를 Import하는 현재 스크립트 설정을 다음에 나타냅니다.
main.discloss.main.discloss.
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...part. 구글 맵을 사용하기 때문에 페이지가 로드되면 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
를 정의함으로써vueViewvariable, 스크립트로 Import하는 올바른 모듈이 사용됩니다.
그 목적은,HomeView컴포넌트를 기본 구글 맵 보기로 지정합니다.그리고 다른 페이지의 다른 컴포넌트는 내 테마에서 해당 링크를 클릭하면 로드됩니다.마지막으로 모든 VueJS 코드를 하나의 스크립트에 포함시키고 싶지 않습니다.따라서 모델입니다.
현재 JS 파일의 모든 내용을 전송하면 다음과 같은 오류가 발생합니다.app.init함수가 아닙니다.컴포넌트는 다음과 같습니다.
<script>
export default {
data: {
// SEARCH
addressComponents: '',
autocompletePlace: '',
autocompleteAddress: '',
(...)
}
app.init 로드가 동작하도록 컴포넌트를 수정하려면 어떻게 해야 하나요?
이미 GuillaumeLeclerc/vue-google-maps에 대해 언급하셨습니다.이 맵은 npm에서 이용 가능합니다.vue-google-maps단, 이 버전은 vue 1.x에서만 동작합니다.
v2를 사용하는 경우 이 뛰어난 vue2 fork xkjyeh/vue-google-maps를 참조하십시오.다음에서 구할 수 있습니다.vue2-google-mapsnpm에.
API는 간단하고 v1 버전과 크게 다르지 않으며 저장소는 업스팀 버전보다 훨씬 더 활성화되어 있습니다.
Vue Map을 직접 굴리는 것보다 훨씬 쉽게 동작할 수 있게 되었습니다.처음에는 그렇게 하고 있었습니다.
도움이 됐으면 좋겠다
그런 기능을 하는 패키지의 코드를 사용하거나 최소한 검토해야 할 수도 있습니다.
예를 들어 Github에서 vue-google-http://https://github.com/GuillaumeLeclerc/vue-google-maps/ 를 확인할 수 있습니다.
Google 지도와 관련된 많은 구성 요소를 정의합니다.
제가 제대로 이해했다면 구글 지도 스크립트가 있습니다.이 스크립트는 로딩되면 window.app.init을 호출합니다.
사용하시는 Vue 컴포넌트는 init() 메서드를 가지고 있습니까(위의 내용은 없습니다).VueJ의 경우 app.methods.init() remember에 있어야 합니다.표준 콜 가능 메서드는 메서드 키 아래에 존재합니다.
또는 app.init이 Vue 컴포넌트의 일부인지 여부에 대해서는 언급하지 않습니다.그렇지 않으면 vue 컴포넌트로 window.app을 재정의하고 있기 때문에 app.init 함수가 오버라이드된 것으로 나타납니다.
마지막으로, 당신의 init이 Vue의 일부일 경우, 당신의 구글 맵 fn 콜백은 Vue가 로드되기 전에 이 init()를 호출하고, 따라서 그러한 메서드는 아직 존재하지 않습니까?
언급URL : https://stackoverflow.com/questions/37142265/vuejs-components
'programing' 카테고리의 다른 글
| 기호 \0개에 어떤 의미일까요? (0) | 2022.08.08 |
|---|---|
| API에서 데이터를 가져온 후 VueJ가 DOM을 업데이트하지 않습니까? (0) | 2022.08.08 |
| 어떻게 메이븐에게 최신 버전의 종속성을 사용하도록 말할 수 있습니까? (0) | 2022.08.08 |
| Vuex: 저장 상태를 빈 어레이로 지우는 중 (0) | 2022.08.08 |
| vue 컨텍스트에서 getElementsByClassName (0) | 2022.08.08 |