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 元素下方都有一条绿色波浪线，并带有以下注释：

Element 'option' cannot be nested inside '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.

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

VS grammar: `option` cannot be nested inside `span`

visual-studio

jquery-select2

vue.js