VS 语法：`option` 不能嵌套在`span` 中

Question

我正在创建一个自定义 Vue 组件，它用作将 jQuery Select2 小部件应用到传统 HTML select 元素的包装器。

一切正常，但 Visual Studio 对我实施解决方案的方式发出语法警告：

<select2 v-on:change="change($event)">
    <option></option>
    <option v-for="(option, optionIndex) in options"
            v-bind:key="optionIndex"
            v-bind:value="option.value">{{option.text}}</option>
</select2>

每个option 元素下方都有一条绿色波浪线，并带有以下注释：

元素'option'不能嵌套在'span'中。

信息清晰易懂。 option 元素应该在 select 内部，但由于我使用的是自定义 select2 组件，Visual Studio 会感到困惑。

我遇到的问题是我的自定义组件实际上只是 select 元素的包装器，因此它在技术上会产生适当的输出。

有没有办法强制 Visual Studio 忽略这种特殊情况，这样我的滚动条中就不会出现语法警告？

有没有其他方法来实现这个组件，所以它不会抱怨？

我想我也许可以为 options 添加另一个道具并传入一个数组以在组件内创建 option 节点，而不是通过插槽传递它们，但它变得复杂，因为我们有一个许多组件使用它与不同的选项属性来产生值和文本（即option.label 和option.id 而不是option.text 和option.value），所以看起来插槽最适合我们的需求。

我的另一个想法是创建一个 select2option 组件，它只是标准选项的包装器，但这似乎太过分了，我无法想象我们的其他开发人员会直观地使用这些标准选项而不是标准 option 元素。

只是想知道 Visual Studio 是否有什么可以在不完全关闭语法的情况下纠正这种行为的方法。

Answer 1

根据DOM Template Parsing Caveats，你应该可以做到

<select is="select2" v-on:change="change($event)">
    <option></option>
    <option v-for="(option, optionIndex) in options"
            v-bind:key="optionIndex"
            v-bind:value="option.value">{{option.text}}</option>
</select>

还要注意proper practice is to have a hyphen in your component name。