Question

下面的代码起初看起来还可以，但是如果在chrome调试器中检查，我会看到一些错误消息“外部根元素将被忽略”

完整的代码在这里：

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声明一分为二。

当vue组件中的语法看起来完美时，“外部根元素将被忽略”错误

1 个答案: