Map

Map data between a local state (v-model) and an internal isomorphic representation (scoped state.value).

Example

An endpoint admin/settings/languages provides a list of available languages as well as a list of activated languages. You want to represent the data as a list of switches.

vue

<Map
  v-model="languages"
  :in="({ availableLanguages, activatedLanguages }) =>
    availableLanguages.map((language) => [language, activatedLanguages.includes(language.code)])"
  :out="([language, activated]) => ({ [language.code]: activated })"
  v-slot="{ state }"
>
  <Switch v-model="state.value[language.code]" />
</Map>

Map ​

Map