0

I'm encountering issue with Element UI after migrating from vue 2 to vue 3

the clearable attribute doesn't work anymore for el tags like el-select, el-input.

<el-input v-model="searchForm.societe" type="text" placeholder="Nom de societe"  clearable></el-input>

[Vue warn]: (deprecation INSTANCE_ATTRS_CLASS_STYLE) Component has inheritAttrs: false but is relying on class/style fallthrough from parent. In Vue 3, class/style are now included in $attrs and will no longer fallthrough when inheritAttrs is false. If you are already using v-bind="$attrs" on component root it should render the same end result. If you are binding $attrs to a non-root element and expecting class/style to fallthrough on root, you will need to now manually bind them on root via :class="$attrs.class".
Details: https://v3-migration.vuejs.org/breaking-changes/attrs-includes-class-style.html
at <ElIcon key=1 class="el-input__icon el-input__clear" onMousedown=fn ... >
at <ElInput modelValue="d" onUpdate:modelValue=fn type="text" ... >

Improve this question
4
  • It's not clear if you're using Element UI or Element Plus which are two different versions of the same library. If you could include the exact versions of Element and Vue (from package.json) you're using that would be helpful. clearable is a supported prop in the latest version of Element Plus and doesn't give any error or warning when tested in isolation. It seems more code and information is necessary from your end to reproduce the issue. Commented Jul 3 at 21:02
  • I'm using before "element-ui": "^2.4.4" with vue 2 and on migration to vue 3 and the lastest vesion of element plus : ^2.10.2 it doesnt work clearable not work event when im calling @clear event i do what you mention but still isn't work and thanks for help still stuck with it. Commented Jul 4 at 12:03
  • please add the content of package.json to your question using the edit feature. It's still not clear based on your phrasing what "on migration to vue 3" means... are you currently on vue 2 or vue 3 or the @vue/compat migration build? Adding package.json to the question would make everything clear. Commented Jul 5 at 0:15
  • In addition, if you can, reproduce the issue in an online sandbox, then add the sandbox link to your question. Once the issue is reproducible for others, it will be much easier to debug and offer solutions. Commented Jul 5 at 0:17

1 Answer 1

Reset to default
0

This is a pretty common hiccup after migrating from Vue 2 + Element UI to Vue 3 + Element Plus.

Make sure you're on a stable Element Plus version (like ^2.4.0 or later).

npm install element-plus@latest

If you created any custom wrapper around <el-input> that uses inheritAttrs: false, you’ll need to update it to manually pass on class and style:

<template>
  <el-input v-bind="$attrs" v-model="myValue" />
</template>

<script>
export default {
  inheritAttrs: false,
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

If you’re using clearable on a direct el-input or el-select with no wrapper, and it still fails, try forcing a minimal reproduction. Sometimes other styles or parent attributes break it.

<template>
  <el-input v-model="searchForm.societe" clearable placeholder="Nom de societe" />
</template>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I'm using before "element-ui": "^2.4.4" with vue 2 and on migration to vue 3 and the lastest vesion of element plus : ^2.10.2 it doesnt work clearable not work event when im calling @clear event i do what you mention but still isn't work and thanks for help still stuck with it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.