当语法在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>`,

如果我用整个模板附加额外的冗余div，则错误消息将消失。

Answer 1

使用v-show时出错

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

它应该是：

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

很可能额外的:打破了vuejs解析器并最终将你的div声明分成两部分。