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