{"record":{"id":"403f43e423fa75e7","repo":"SortableJS/Vue.Draggable","slug":"element-props-is-deprecated-please-use-tag-props-i","errorCode":null,"errorMessage":"Element props is deprecated please use tag props instead. See https://github.com/SortableJS/Vue.Draggable/blob/master/documentation/migrate.md#element-props","messagePattern":"Element props is deprecated please use tag props instead\\. See https://github\\.com/SortableJS/Vue\\.Draggable/blob/master/documentation/migrate\\.md#element-props","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/vuedraggable.js","lineNumber":185,"sourceCode":"      slots,\n      this.$slots,\n      this.$scopedSlots\n    );\n    this.headerOffset = headerOffset;\n    this.footerOffset = footerOffset;\n    const attributes = getComponentAttributes(this.$attrs, this.componentData);\n    return h(this.getTag(), attributes, children);\n  },\n\n  created() {\n    if (this.list !== null && this.value !== null) {\n      console.error(\n        \"Value and list props are mutually exclusive! Please set one or another.\"\n      );\n    }\n\n    if (this.element !== \"div\") {\n      console.warn(\n        \"Element props is deprecated please use tag props instead. See https://github.com/SortableJS/Vue.Draggable/blob/master/documentation/migrate.md#element-props\"\n      );\n    }\n\n    if (this.options !== undefined) {\n      console.warn(\n        \"Options props is deprecated, add sortable options directly as vue.draggable item, or use v-bind. See https://github.com/SortableJS/Vue.Draggable/blob/master/documentation/migrate.md#options-props\"\n      );\n    }\n  },\n\n  mounted() {\n    this.noneFunctionalComponentMode =\n      this.getTag().toLowerCase() !== this.$el.nodeName.toLowerCase() &&\n      !this.getIsFunctional();\n    if (this.noneFunctionalComponentMode && this.transitionMode) {\n      throw new Error(\n        `Transition-group inside component is not supported. Please alter tag value or remove transition-group. Current tag value: ${this.getTag()}`","sourceCodeStart":167,"sourceCodeEnd":203,"githubUrl":"https://github.com/SortableJS/Vue.Draggable/blob/431db153bfdfe09e31f622f01e9b3220b77e6b56/src/vuedraggable.js#L167-L203","documentation":"This is a deprecation warning (console.warn, not a throw) emitted in created(): the `element` prop was renamed to `tag` in vuedraggable 2.x/3.x. The library still honors `element` for backwards compatibility but tells you to migrate. It fires whenever `element` is set to anything other than the default 'div'.","triggerScenarios":"Passing element='ul', element='transition-group', etc. to <draggable> after upgrading from Vue.Draggable v1 to v2.x+, where the prop was renamed to tag.","commonSituations":"Upgrading Vue.Draggable versions and keeping old template markup; copy-pasting old blog snippets; codebases that never updated after the migrate.md changes.","solutions":["Rename the element prop to tag in every <draggable> usage","If component data was passed alongside element (transition-group), move it to the component-data prop of tag","Search the codebase for 'element=' / ':element' and replace with 'tag=' / ':tag'"],"exampleFix":"// before\n<draggable element=\"ul\" v-model=\"list\">\n  <li v-for=\"item in list\" :key=\"item.id\">{{ item.name }}</li>\n</draggable>\n\n// after\n<draggable tag=\"ul\" v-model=\"list\">\n  <li v-for=\"item in list\" :key=\"item.id\">{{ item.name }}</li>\n</draggable>","handlingStrategy":"validation","validationCode":"function migrateDraggableProps(props) {\n  if (props && props.element !== undefined) {\n    const { element, ...rest } = props;\n    console.warn('draggable: \"element\" is deprecated; use \"tag\" instead');\n    return { tag: element, ...rest };\n  }\n  return props;\n}","typeGuard":"function isLegacyElementBinding(p) {\n  return typeof p === 'object' && p !== null && 'element' in p;\n}","tryCatchPattern":"null","preventionTips":["Always use tag, never element, in new code","Grep codebase for ':element' / 'element=' on draggable during upgrades","Read the migrate.md doc when bumping Vue.Draggable versions","Add a lint rule or codemod flagging the element prop on draggable"],"tags":["vue","vuedraggable","deprecation","props-renamed"],"backgroundTag":"deprecated-prop","analyzedSha":"431db153bfdfe09e31f622f01e9b3220b77e6b56","analyzedAt":"2026-09-02T01:53:03.882Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T06:17:21.866Z"}