Vue.js 2 - сладкий пакет предупреждений simplert не работает

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

<script>
import Simplert from 'vue2-simplert'

export default {
  data () {
    return {
      obj: {
        title: 'Alert Title',
        message: 'Alert Message',
        type: 'info',
        useConfirmBtn: true,
        customConfirmBtnText: 'OK'
      },
    }
  },
  methods: {
    openSimplert () {
      this.$refs.simplert.openSimplert(this.obj)
    },
  }
}
</script>

Регистрирую компонент в своем app.js вот так:

Vue.component('alert', require('./components/Alert.vue'));

const app = new Vue({
    el: '#app'
});

А потом пытаюсь использовать его в своем шаблоне:

<alert :useRadius="true"
       :useIcon="true"
       ref="simplert">
</alert>

Это часть этого шаблона:

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <a class="btn btn-info link-button" href="/extras/create" role="button">Lag ny extra</a>
            <div class="panel panel-default">
                <div class="panel-heading">Extras</div>
                <div class="panel-body">
                    @foreach($data as $extra)
                      <div class="media row">
                        <div class="media-left col-sm-3">
                          <a href="#">
                            <img class="media-object" src="/img/extras/{{ $extra->image_path }}" alt="{{ $extra->title }}">
                          </a>
                        </div>
                        <div class="media-body col-sm-6">
                          <h4 class="media-heading">{{ $extra->title }}</h4>
                          <p>{{ $extra->description }}</p>
                        </div>
                        <div class="col-sm-3 action-buttons">
                          <a class="btn btn-info" href="/extras/create" role="button">Rediger</a>
                          <alert :useRadius="true"
                                 :useIcon="true"
                                 ref="simplert">
                         </alert>
                        </div>
                      </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Что включается в шаблон приложения следующим образом:

<div id="app">
    <nav class="navbar navbar-default navbar-static-top">
     ...
    </nav>

    @yield('content')
</div>

Я вижу компонент в инструментах отладки vue, но HTML не создается, я вижу только это:

<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->

Муравей, я получаю сообщение об ошибке в консоли:

[Предупреждение Vue]: не удалось смонтировать компонент: шаблон или функция рендеринга не определены.

найти в

--->

Обновить

После создания нового проекта с Laravel 5.5, поскольку я думал, что установка в Laravel 5.2 создает проблемы, я добавил ту же библиотеку и компонент, и все же этот компонент выдает ошибку, к счастью, другие компоненты теперь работают, но это все равно дает ту же ошибку с настройкой Laravel 5.5 по умолчанию.


javascript vuejs2 sweetalert2 laravel-5.2
person Leff    schedule 09.01.2018    source источник
comment
Не могли бы вы обновить свой вопрос, указав, где расположены ваш первый и третий блоки кода? Или, может быть, выложить свои файлы целиком?   -  person Soleno    schedule 09.01.2018
comment
Я обновил вопрос   -  person Leff    schedule 09.01.2018
comment
Я предполагаю, что это потому, что <template></template> отсутствует в Alert.vue   -  person Jacob Goh    schedule 09.01.2018
comment
Но, как я уже упоминал, после внесения изменений в package.json и gulpfile, даже компоненты с шаблонами не работают.   -  person Leff    schedule 09.01.2018
comment
То, как используется компонент simplert, не кажется правильным. Попробуйте удалить Alert.vue и использовать это для установки компонента предупреждения Vue.component('alert', require('vue2-simplert'));. Используйте компонент напрямую и сделайте this.$refs.simplert.openSimplert(obj) там, где компонент вызывается.   -  person Jacob Goh    schedule 09.01.2018
comment
@JacobGoh Я не думаю, что это имеет какое-то отношение к этому, почему-то шаблоны на всех компонентах не компилируются   -  person Leff    schedule 09.01.2018
comment
Вам необходимо определить <template> раздел в вашем Alert компоненте   -  person thanksd    schedule 09.01.2018
comment
Когда я это делаю, у меня больше нет ошибки, но у меня также есть пустой шаблон, я, очевидно, неправильно реализую пакет, но не уверен, как это сделать правильно?   -  person Leff    schedule 09.01.2018
comment
Как реализовать пакет vue2-simplert - это другой (и очень широкий) вопрос. Пожалуйста, прочтите их документацию и уточните свое сообщение, чтобы было понятно, что вы пробовал и то, что не работает, как ожидалось.   -  person thanksd    schedule 09.01.2018
comment
Что ж, я уже опубликовал в вопросе все этапы реализации пакета, я действительно понятия не имею, что я могу добавить, чтобы сделать его еще более понятным.   -  person Leff    schedule 09.01.2018
comment
Когда я это делаю, у меня больше нет ошибки, но у меня также есть пустой шаблон. Трудно понять, что именно это означает, потому что вы не обновили свой пост, чтобы показать, что вы пытаетесь.   -  person thanksd    schedule 09.01.2018
comment
Под этим я имел в виду, что я только что добавил в компонент пустой тег шаблона, такой как этот <template></template>, но, поскольку это не описано в документации, я исключил его, поскольку это было просто предложением здесь, в комментариях.   -  person Leff    schedule 09.01.2018

Ответы (1)


arrow_upward
1
arrow_downward

Только что выяснилось, что simplert также существует как плагин Vue. Это должно упростить весь процесс, и он намного лучше реализован, поскольку он использует шину событий для открытия / закрытия и больше не использует $refs, чего следует избегать в соответствии с официальные документы Vue.

Вы бы сделали это, например, в своем app.js:

import Simplert from 'vue2-simplert-plugin'
Vue.use(Simplert)

const app = new Vue({
  el: '#app',
  data: {
    obj: {
      title: 'Alert Title',
      message: 'Alert Message',
      type: 'info',
      useConfirmBtn: true,
      customConfirmBtnText: 'OK'
    }
  },
  methods: {
    openSimplert () {
      this.$Simplert.open(this.obj)
    },
    closeSimplert () {
      this.$Simplert.close()
    }
  }
})

В своем шаблоне Larvavel просто используйте:

@section('content')
  // ...
    <simplert></simplert>
  // ...
@endsection

Простая документация в вики немного сбивает с толку и не актуальна в отношении плагина. Дайте мне знать, если это сработает для вас!

person Soleno    schedule 09.01.2018
comment
Когда я использую вышеуказанное, я получаю предупреждение [Vue warn]: Unknown custom element: <simplert> - did you register the component correctly? For recursive components, make sure to provide the "name" option. - person xylar; 30.01.2019
comment
Возможно, вы неправильно установили? Вы импортируете, а затем выполняете Vue.use (Simplert)? - person Soleno; 30.01.2019
comment
Да, но, скорее всего, я сделал что-то не так, поскольку я впервые использую Vue. Я создал здесь вопрос с содержимым файла: stackoverflow.com/questions/54440029/ - person xylar; 30.01.2019