小编Dev*_*427的帖子

设置非常简单：

const input = window.document.getElementById('Input');
input.value = "foobar"
console.log(input.checkValidity());

<input id="Input" type="text" minlength="8" required />

以下内容true在应该返回时返回false。参见https://jsbin.com/huqowesewu/edit?html,输出

这到底是为什么？输入的长度为 6，小于 8，因此它应该是无效的。但事实并非如此。这个属性是不是坏了？或者checkValidity()坏了？至少可以说我很困惑。

我正在为 Web 应用程序编写测试套件，并且需要将 JSX 从源导入到测试环境中。此过程的一部分用于@babel/register将我的 JSX 正确转换为标准 JS。我的 babel 配置如下所示：

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-syntax-jsx",
    ["babel-plugin-transform-jsx-to-htm",{
      "import": {
        "module": "htm/preact",
        "export": "html"
      },
      "tag": "$$html"
    }]
  ]
}

我执行node -r @babel/register ...<unrelated test command here>

我遇到的问题是，当我的源文件之一从仅提供 ESM 输出而不提供 CJS 的库导入时。这是我遇到的错误：

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: <file path to non-working ESM module>
require() of ES modules is not supported.
require() of <file path to non-working ESM module> from <file path to source that …

就像标题所说的那样，我试图拥有一个导航抽屉，它具有某些选项的可扩展子菜单。像“用户配置文件”主菜单选项可能有子菜单“更新联系人详细信息”和“查看注册”。

我已经尝试了几种方法，基本上归结为相同的两个问题。因为每个菜单选项都是一个列表磁贴，子菜单堆叠在它的右侧（例如，整个子菜单在同一个磁贴中），或者整个菜单选项列表都有这些下拉图标, 当只有一个菜单选项实际上有一个子菜单时。此外，我下面的第二个代码片段也阻止您导航到任何主菜单链接，这不是我们想要的。

示例 1，其中子菜单与主菜单选项卡在同一个图块中。

<div v-for="(link, i) in links" :key="i">
    <v-list-tile v-if="!link.subLinks" :to="link.to" :active-class="color" avatar class="v-list-item">
        <v-list-tile-action>
            <v-icon>{{ link.icon }}</v-icon>
        </v-list-tile-action>
        <v-list-tile-title v-text="link.text"/>
    </v-list-tile>

    <div v-else>
        <v-list-tile avatar class="v-list-item">
            <v-list-tile-action>
                <v-icon>{{ link.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-title v-text="link.text"/>
            <v-list-group>
                <v-list-tile sub-group v-for="(subLink, j) in link.subLinks" :key="j" :to="subLink.to" :active-class="color" avatar class="v-list-item">
                    <v-list-tile-title v-text="subLink.text"/>
                </v-list-tile>
            </v-list-group>
         </v-list-tile>
     </div>
</div>

示例 2，其中每个菜单选项都有一个下拉箭头，即使是没有任何子菜单的选项。

<v-list-group v-for="(link, i) in links" :key="i" :prepend-icon="link.icon" :to="link.to" :active-class="color" avatar class="v-list-item">
    <template v-slot:activator>
        <v-list-tile>
            <v-list-tile-title>{{ link.text }}</v-list-tile-title>
        </v-list-tile>
    </template>

    <v-list-tile v-for="(subLink, j) …