Ошибка «внешний корневой элемент будет игнорироваться», когда синтаксис кажется идеальным в компоненте vue

Question

Вначале следующий код выглядит нормально, но если его проверить в отладчике Chrome, я вижу сообщение об ошибке «внешний корневой элемент будет игнорироваться»

Полный код здесь:

JS Fiddle

значение шаблона компонента Vue определенно имеет только один верхний корень, содержащий элемент div, но странным образом отладчик сообщает, что это не так. Ниже приведена часть определения шаблона компонента:

        template: 
        `<div class="modal fade" v-show:"visible">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <slot name="header"></slot>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <slot></slot>
                    </div>
                    <div class="modal-footer">
                        <slot name="footer"></slot>
                        <button type="button" class="btn btn-primary">Save changes</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
      </div>`,

Сообщение об ошибке исчезнет, ​​если я вложу весь шаблон с дополнительным избыточным делением.

Answer 1

У вас ошибка при использовании v-show

<div class="modal fade" v-show:"visible">

Должно быть:

<div class="modal fade" v-show="this.visible">

Скорее всего, дополнительные : разбивают синтаксический анализатор vuejs и в итоге разбивают ваше объявление div на две части.