Subscribe on changes!

Allow binding `is` for dynamic component via `v-bind`

avatar
Dec 8th 2021

What problem does this feature solve?

Right now, I am dynamically rendering and adding a few props including dynamic tag.

Specifically, if i18n is enabled I want to render i18n-t tag and render span if not. Along with this I also have a couple of dynamic props like keypath & tag (both are props of vue-i18n).

Below is computed prop:

const computedProps = computed(() => (key: string, tag = 'span') => {
  const isI18nEnabled = config.value.app.enableI18n

  return {
    is: isI18nEnabled ? 'i18n-t' : 'span',
    keypath: isI18nEnabled ? key : null,
    tag: isI18nEnabled ? tag : null,
  }
})

Issue is it renders component tag as it is if I use it like <component v-bind="computedProps(item.title, 'span')" ...>

What does the proposed API look like?

N/A

Playground:

View