ESLint is not aware of components of Element UI

user_13404328 0
Viewed 423

I am using Vue.js and Element UI. When I use Element UI components such as Input or Col, ESLint argues invalid-end-tag as below.

I already set eslint-plugin-vue, so why is ESLint not aware of custom components?
Is there any way to solve this error?

<template>
  <div>
    <Input
      v-model="formLogin.username"
      type="text"
      size="large"
      @on-enter="handleLogin"
    >
    <Icon
      slot="prepend"
      type="ios-person-outline"
    />
    </Input>
  </div>
</template>

Parsing error: x-invalid-end-tag. eslint(vue/no-parsing-error) [13, 5]
element-ui vue-component eslint vue.js javascript
1 Answers

Neither <input> or <col> are Element UI components.

They are both native HTML tags and they are both self-closing tags that can't be used that way.

  • Element UI uses <el-input>, not <input>.

  • Element UI uses <el-col>, not <col>.

  • To prepend an icon in <el-input>, use the prefix-icon prop or prefix slot shown below

A correct example:

<el-row>
  <el-col :span="12">
    <el-input
      v-model="input"
    >
      <i slot="prefix" class="el-input__icon el-icon-user"></i>
    </el-input>
  </el-col>
</el-row>

<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>
user_21850930
Related