Vue 3 input components v-model breaking change

Copy post link

Hello all Dialtone users! There is a small breaking change that has just been released in the latest version of Dialtone. This breaking change only applies to Dialtone Vue 3 input components.

The standard in Vue 3 is to use the prop name modelValue instead of value for components that use v-model and map to input components. For checkbox/radio components modelValue maps to the checked attribute instead of value. We were not consistent on this in the initial migration to Dialtone Vue 3, so we are fixing it now. This has now been updated for all Dialtone Vue 3 input components. Please see the breaking change in the Vue 3 migration guide for more info: https://v3-migration.vuejs.org/breaking-changes/v-model.html#_3-x-syntax

You will only need to migrate components that were referencing the value/checked prop directly. If you were using v-model on the component already, you will not need to make any changes.

Affected Components #

The following components are affected by this change:

• Input
• Select Menu
• Editor
• Checkbox
• Radio
• Radio Group
• Toggle

Migration steps for Input, Select Menu, Editor #

Any instances of value being set on the affected components will need to be changed to modelValue.

Before:

<dt-input :value="myValue" label="Test input" />

After:

<dt-input :model-value="myValue" label="Test input" />

Migration steps for Radio, Checkbox, Toggle #

Any instances of checked being set on the affected components will need to be changed to modelValue.

Before:

<dt-checkbox checked label="Test checkbox" />

After:

<dt-checkbox :model-value="true" label="Test checkbox" />

Migration steps for Radio Group #

Any instances of value being set on the outer Radio Group component will need to be changed to modelValue.

Before:

<dt-radio-group
  value="apple"
  legend="Fruits"
>
  <dt-radio value="apple"><span>Apple</span></dt-radio>
  <dt-radio value="banana"><span>Banana</span></dt-radio>
  <dt-radio value="other"><span>Other</span></dt-radio>
</dt-radio-group>

After:

<dt-radio-group
  model-value="apple"
  legend="Fruits"
>
  <dt-radio value="apple"><span>Apple</span></dt-radio>
  <dt-radio value="banana"><span>Banana</span></dt-radio>
  <dt-radio value="other"><span>Other</span></dt-radio>
</dt-radio-group>

Note the individual dt-radio's within do not need to be changed, as their modelValue references checked rather than value.

Again, if you are using v-model instead of value, you do not need to make any changes.

Thanks! Dialtone Team 💜