时间戳

首页 > 解决方案 > 当语法在 vue 组件中看起来很完美时，“外部根元素将被忽略”错误

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

问题描述

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

完整的代码在这里：

JS小提琴

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 将整个模板括起来，错误消息就会消失。

标签： templatesvue.jssyntaxcomponents

解决方案

您在使用中出现错误v-show

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

它应该是：

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

很可能额外:的东西会破坏 vuejs 解析器并最终将您的 div 声明一分为二。

推荐阅读