【VSCODE-VUE】Expected 'xx' elements to have 'v-bind:xx' attribute.eslint-plugin-vue

问题描述

[vue/require-component-is]
Expected '<component>' elements to have 'v-bind:is' attribute.eslint-plugin-vue

 

解决方案

1、消极方案 - 屏蔽提示

文件->首选项->设置，输入 vetur.validation.template，去掉 "Validate vue-html in <template> using eslint plugin-vue" 的勾选，然后重启 VSCODE

vetur.validation.template

 

 2、积极方案 - 按vue的格式来

<template>
  <!-- eslint-disable vue/require-component-is -->
  <component v-bind="linkProps(to)">
    <slot />
  </component>
</template>

将linkProps方法绑定到is属性上，需要在v-bind指定is属性，果然不提示错误了，如下： 

<template>
  <!-- eslint-disable vue/require-component-is -->
  <component v-bind:is="linkProps(to)">
    <slot />
  </component>
</template>

但是在保存/编译时又会报如下错误，于是根据提示将v-bind删除，成功编译通过

warning: Unexpected 'v-bind' before ':' (vue/v-bind-style)

<template>
  <!-- eslint-disable vue/require-component-is -->
  <component :is="linkProps(to)">
    <slot />
  </component>
</template>