JavaScript

JavaScript

Made by DeepSource

Should have valid v-is directives JS-0661

Bug risk
Minor
vue

When using in-DOM templates, the template is subject to native HTML parsing rules. Some HTML elements, such as <ul>, <ol>, <table> and <select> have restrictions on what elements can appear inside them, and some elements such as <li>, <tr>, and <option> can only appear inside certain other elements. As a workaround, we can use the v-is directive on these elements.

v-is directive is not valid in following cases: - The directive has that argument. - The directive has that modifier. - The directive does not have that attribute value. - The directive is on Vue-components.

Bad Practice

<tr v-is:a="foo"></tr>
<tr v-is.m="foo"></tr>
<tr v-is></tr>
<tr v-is=""></tr>
<MyComponent v-is="foo" />

Recommended

<tr v-is="'blog-post-row'"></tr>
<tr v-is="foo"></tr>