{"record":{"id":"31dfd2daf466189a","repo":"SortableJS/Vue.Draggable","slug":"options-props-is-deprecated-add-sortable-options","errorCode":null,"errorMessage":"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","messagePattern":"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","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/vuedraggable.js","lineNumber":191,"sourceCode":"    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()}`\n      );\n    }\n    const optionsAdded = {};\n    eventsListened.forEach(elt => {\n      optionsAdded[\"on\" + elt] = delegateAndEmit.call(this, elt);\n    });","sourceCodeStart":173,"sourceCodeEnd":209,"githubUrl":"https://github.com/SortableJS/Vue.Draggable/blob/431db153bfdfe09e31f622f01e9b3220b77e6b56/src/vuedraggable.js#L173-L209","documentation":"This is a deprecation warning (console.warn, not a throw) emitted in created(): the `options` prop was removed in favor of passing Sortable options directly as individual props on <draggable> or via v-bind. The library warns whenever `this.options` is defined.","triggerScenarios":"Using <draggable :options='{ handle: \".handle\", animation: 150 }'> after upgrading to vuedraggable versions that support options-as-props (2.18+/3.x).","commonSituations":"Upgrading Vue.Draggable and keeping old v1-era `:options` bindings; tutorials predating the prop split; dynamically building an options object and binding it.","solutions":["Move each Sortable option to a direct prop: <draggable handle='.handle' :animation='150'>","Or spread the options object with v-bind: <draggable v-bind='sortableOptions'>","Remove the :options binding entirely; search for ':options=' / 'options=' on draggable usages"],"exampleFix":"// before\n<draggable v-model=\"list\" :options=\"{ handle: '.handle', animation: 150 }\">\n  <div v-for=\"item in list\" :key=\"item.id\">{{ item.name }}</div>\n</draggable>\n\n// after\n<draggable v-model=\"list\" handle=\".handle\" :animation=\"150\">\n  <div v-for=\"item in list\" :key=\"item.id\">{{ item.name }}</div>\n</draggable>","handlingStrategy":"validation","validationCode":"function migrateDraggableProps(props) {\n  if (props && props.options !== undefined) {\n    const { options, ...rest } = props;\n    console.warn('draggable: \"options\" prop is deprecated; pass Sortable options as props or v-bind');\n    return { ...rest, ...options };\n  }\n  return props;\n}","typeGuard":"function isLegacyOptionsBinding(p) {\n  return typeof p === 'object' && p !== null && 'options' in p;\n}","tryCatchPattern":"null","preventionTips":["Pass Sortable options as individual props or via v-bind=\"sortableOptions\"","Grep codebase for ':options=' on draggable during upgrades","Read the migrate.md doc when bumping Vue.Draggable versions","Centralize draggable option constants so migration is a one-line spread"],"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"}