FormLanguage โ€‹

Renders a language in FormLanguages components.

Basic Usage โ€‹

<FormLanguage> component can be used in <FormLanguages> component:

vue
<template>
  <Vueform>
    <template #empty>
      <FormLanguages>
        <FormLanguage
          language="English"
          code="en"
        />
        <FormLanguage
          language="Chinese"
          code="zh"
        />
      </FormLanguages>

      <FormElements>
        <TTextElement
          name="title"
          label="Title"
        />
        <TEditorElement
          name="article"
          placeholder="Article content..."
        />
      </FormElements>
    </template>
  </Vueform>
</template>

Configuration options can be passed over as regular component props. Check out Options section for available configuration options.

Options โ€‹

Find below the list of options that can use to configure FormLanguage component. Options can be passed to the component via props.

language โ€‹

  • Type: string
  • Required: true
vue
<FormLanguage language="English" ... />

The display name of the language.

code โ€‹

  • Type: string
  • Required: true
vue
<FormLanguage code="en" ... />

The language code.

view โ€‹

  • Type: string
vue
<FormLanguage view="alt" ... />

The name of the view to be used for the component. If undefined the default view will be used.

Learn more about views here.

Properties โ€‹

All the data, computed and inject properties of the component.

selectedLanguage โ€‹

  • Type: string
  • Group: computed

The language code of the currently selected language (2 letters).

selected โ€‹

  • Type: boolean
  • Group: computed

Whether the current language is the selected one.

Size โ€‹

  • Type: string
  • Group: inject

The size of the component.

View โ€‹

  • Type: string
  • Group: computed

The name of the resolved view for the component. This one should be used to determine the component's view in class functions.

template โ€‹

  • Type: object
  • Group: computed

The component's template.

classes โ€‹

  • Type: object
  • Group: computed

The component's classes.

theme โ€‹

  • Type: object
  • Group: inject

The global theme object, which contains all the default templates and classes.

form$ โ€‹

  • Type: Vueform
  • Group: inject

The root form's component.

Methods โ€‹

The methods of the component.

select โ€‹

  • Returns: void

Select the language.

Events โ€‹

Events emitted by the component.

select โ€‹

  • Params:
    • {string} language - the selected language

Triggered when the language is selected by the user.

๐Ÿ‘‹ Hire Vueform team for form customizations and developmentLearn more