Вопрос:

Компоненты VueJS

javascript laravel vue.js vuejs2

3212 просмотра

3 ответа

1397 Репутация автора

Я хочу использовать компоненты VueJS для очистки моих скриптов. Поэтому у меня есть компонент для каждой страницы, которую я загружаю в Laravel. Пока все отлично работает. Но у меня есть проблемы с переносом моей текущей скриптовой логики на компонент.

Это текущая настройка скрипта, импортирующая используемые компоненты:

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 был в одном скрипте. Поэтому модели.

Когда я передаю все содержимое этого текущего файла JS, я получаю сообщение об ошибке, app.initкоторое не является функцией. Компонент выглядит так:

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

Как изменить мой компонент таким образом, чтобы загрузка app.init все еще работала?

Автор: sesc360 Источник Размещён: 10.05.2016 03:01

Ответы (3)


1 плюс

874 Репутация автора

Если я вас правильно понимаю, у вас есть скрипт Google Maps, который при загрузке вызывает window.app.init, верно?

У вашего компонента Vue есть метод init () (ни один из них не показан выше)? Если бы он был, он должен быть в app.methods.init (), помните для VueJS, стандартные вызываемые методы живут под ключом методов.

В качестве альтернативы: вы не упоминаете, является ли ваш app.init частью компонента Vue или нет. Если это не так, может показаться, что ваша функция app.init переопределяется, потому что вы переопределяете window.app в качестве компонента vue.

Наконец, если ваш init является частью Vue, вызывается ли ваш google maps fn callback этим init () перед загрузкой Vue, и, следовательно, такого метода не существует (пока)?

Автор: Tremendus Apps Размещён: 10.05.2016 03:30

7 плюса

1276 Репутация автора

Может быть, вы должны использовать или, по крайней мере, изучить код пакета, который делает это.

Например, вы можете проверить vue-google-maps на Github: https://github.com/GuillaumeLeclerc/vue-google-maps/

Он определяет множество компонентов, связанных с Google Maps.

Автор: Didier Sampaolo Размещён: 10.05.2016 03:52

7 плюса

5184 Репутация автора

Решение

Кто-то уже упоминал о GuillaumeLeclerc / vue-google-maps, который доступен на npm as vue-google-maps, но имейте в виду , что эта версия работает только с vue 1.x

Если вы используете v2, посмотрите на эту замечательную вилку vue2 xkjyeah / vue-google-maps - она ​​доступна как vue2-google-mapsна npm.

API прост и не сильно отличается от версии v1, а хранилище гораздо более активно, чем его коллега из upsteam.

Это действительно сделало мою виртуальную карту намного более безболезненной, чем моя собственная, что я и делал изначально.

Надеюсь, это поможет

Автор: darryn.ten Размещён: 28.11.2016 10:14
Вопросы из категории :
32x32