Блог

Следующий код сначала кажется нормальным, но при проверке в отладчике 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">amp;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>`,
  

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

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

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

Это должно быть:

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

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