时间戳

首页 > 解决方案 > VS 语法：`option` 不能嵌套在`span` 中

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

问题描述

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

一切正常，但 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元素应该在里面select，但由于我使用的是自定义select2组件，Visual Studio 变得很困惑。

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

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

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

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

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

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

标签： visual-studiovue.jsjquery-select2

解决方案

Per 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>

另请注意，正确的做法是在组件名称中使用连字符。

推荐阅读