Skip to content

refactor: replace the slot-scope syntax and $set removed in Vue 3 - #3849

Open
Vondry wants to merge 1 commit into
bolt:6.2from
Vondry:refactor/vue3-slot-syntax-and-set
Open

Vondry wants to merge 1 commit into
bolt:6.2from
Vondry:refactor/vue3-slot-syntax-and-set

Conversation

@Vondry

@Vondry Vondry commented Oct 26, 2026 •

Copy link
Copy Markdown
Contributor

Next step in splitting #3751 towards Vue 3.

Why

The admin still uses two Vue 2 APIs that Vue 3 removes:

  • The slot/slot-scope attributes, for Select's singleLabel slot. They are deprecated and removed in Vue 3, which ignores them silently, so the record link in the selected label would disappear.
  • this.$set, in Imagelist when an image is removed. vm.$set is removed in Vue 3, so removing an image would throw.

Why this approach

  • #singleLabel and Array.prototype.splice already work on Vue 2.7, so this can land now with no behaviour change.
  • splice(i, 1, item) is what $set does for arrays in Vue 2.

What changed

  • Select: the record-link label uses #singleLabel. Its v-if moves inside the slot because it reads the slot props. When it is false, vue-multiselect falls back to its own label, as before.
  • Select: the status singleLabel template is removed. Vue 2 keeps only the last template per slot name, so it never rendered: the selected status shows no dot, before and after.
  • Imagelist: $set becomes splice.
  • Tests: the multiselect stub passes the first selected item to singleLabel, like vue-multiselect does, and two tests cover the selected-value label.

Testing

vue3_slot_syntax_and_set_demo.mp4

Vue 3 drops the `slot`/`slot-scope` attributes and `vm.$set`; both
replacements already work on Vue 2.7, and behaviour is unchanged.

Select: the record-link `singleLabel` template moves to `#singleLabel`.
Its `v-if` reads the slot props, so it moves inside the slot; when it is
false the slot renders nothing and vue-multiselect falls back to its own
label, as before. The status `singleLabel` template is removed: Vue 2
keeps only the last template per slot name, so it never rendered.

Imagelist: `this.$set(list, i, item)` becomes `list.splice(i, 1, item)`,
which is what `$set` does for arrays in Vue 2.

The multiselect stub now passes the first selected item to `singleLabel`,
like vue-multiselect, so the selected-value label can be tested.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant