vue.js - Buefy 导航栏组件中可能存在的错误

Question

Buefy 导航栏组件忽略了mobile-burger道具值。

根据文档https://buefy.org/documentation/navbar/，如果此道具为假，则不应在手机上显示导航栏汉堡。但看起来实际上并非如此。

<b-navbar mobile-burger="false">
            <template slot="brand">
                <b-navbar-item href="/">
                    <div class="logo-text" data-text="logo">logo</div>
                </b-navbar-item>
            </template>
</b-navbar>

我预计如果我设置 mobile-burger="false" 那么汉堡将不会显示在手机上。但我没有看到任何变化。

有人知道怎么修这个东西吗 ？

Answer 1

解释

仅当您使用 v-bind 语法时才会计算 Vue 属性。

因为您没有使用 v-bind，所以 Buefy 被传递了一个值为“false”的字符串，而不是一个值为“false”的布尔值。

结果是'mobile-burger' 评估为布尔值'true'，因为除了null、空字符串、布尔值false 或JavaScript 认为'false' 的其他一些值之外的内容的真实性。

mobile-burger="false" === String false == Boolean true

v-bind:mobile-burger="false" === Boolean false

:mobile-burger="false" === Boolean false

关于 JavaScript 中的 Truthy 值：
https ://developer.mozilla.org/en-US/docs/Glossary/Truthy

建议

更正后的代码可能如下所示：

<b-navbar :mobile-burger="false">
...
</b-navbar>

关于 Vue 模板语法：
https ://vuejs.org/v2/guide/syntax.html