Tôi muốn sử dụng các thành phần VueJS để làm sạch các tập lệnh của mình. Vì vậy, tôi có một thành phần cho mỗi trang tôi đang tải vào Laravel. Tất cả mọi thứ hoạt động tốt cho đến nay. Nhưng tôi có vấn đề chuyển logic kịch bản hiện tại của tôi thành một thành phần.Thành phần VueJS
Đây là thiết lập kịch bản hiện hành nhập khẩu các thành phần được sử dụng:
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);
},
}
(...)
}
chính đối với tôi là một phần window.app = new Vue.... Tôi sử dụng bản đồ google và do đó khi trang được tải, nó tìm kiếm phương thức app.init. Đây là một phần của kịch bản tôi tải bên trong mẫu lưỡi:
<!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>
Các trang cá nhân (nơi tôi tạo cho mỗi một module trong Vue) trông như thế này:
@extends('app', ['vueView' => 'home-view'])
@section('page_title', 'title')
@section('page_description', 'title')
@section('content')
content
@endsection
Bằng việc xác định các vueView biến, mô-đun chính xác mà tôi đang nhập trong tập lệnh của mình được sử dụng.
Mục tiêu là sử dụng thành phần HomeView làm chế độ xem bản đồ google chính. Và các thành phần khác cho các trang khác nhau tôi tải khi nhấp vào liên kết tương ứng trong chủ đề của tôi. Cuối cùng, tôi không muốn có tất cả mã VueJS trong một kịch bản. Vì vậy, các mô hình.
Khi tôi chuyển tất cả nội dung của tệp JS hiện tại này, tôi nhận được một lỗi phàn nàn rằng app.init không phải là một chức năng. Thành phần trông giống như sau:
<script>
export default {
data: {
// SEARCH
addressComponents: '',
autocompletePlace: '',
autocompleteAddress: '',
(...)
}
Làm cách nào để sửa đổi thành phần của mình theo cách mà tải ứng dụng vẫn hoạt động?
Có. Tôi đang nhập tập lệnh Google Maps và yêu cầu nó tải phương thức init vào tải trang qua lệnh gọi window.app.init trong tập lệnh. Tôi đã thêm phương thức init() mà không được hiển thị một cách tình cờ, nhưng đã tồn tại và tải mọi thứ hoàn toàn tốt đẹp liên quan đến bản đồ. Tất cả các phương thức đều hoạt động và làm việc trong khóa phương thức. Mục tiêu bây giờ là cấu trúc lại mã và khi trang "chính" được tải chứa chế độ xem bản đồ, tôi muốn tạo thành phần chỉ chứa tất cả những thứ cần thiết cho trang này. Một trang khác sẽ có nội dung khác nhau và tôi muốn sử dụng các phương pháp khác nhau ở đó. – sesc360
Ứng dụng.init không phải là một phần của các thành phần. Đây chỉ là giống như mô tả tại thời điểm này. Trên thực tế, biểu thức 'window.app = new Vue' đang cho tôi đau đầu về cách sử dụng các thành phần đúng cách, vì vậy khi kịch bản google maps được tải, nó sẽ tìm đúng phương thức init. – sesc360
Vì vậy, làm thế nào tôi đã có cấu trúc này là để thiết lập các bản đồ Google như là một dịch vụ JS độc lập, được gọi là chính Vue, có thể trong cuộc gọi được tạo ra() vòng đời của nó. Bạn có quyền kiểm soát tốt hơn đối với sự phối hợp theo cách này. Bạn không cần phải làm điều này, nhưng nếu không bạn sẽ phải phối hợp thời gian của tất cả mọi thứ sao cho thành phần Vue có sẵn trước khi gọi lại từ bản đồ đến vue được thực hiện. Đề nghị ghi lại ghi chú vào bảng điều khiển trong các cuộc gọi lại vòng đời đã tạo() và sẵn sàng() của Vue và thực hiện tương tự trong bản đồ google để xem bản đồ của bạn đã sẵn sàng chưa. –