FormLanguage

Renders a language in FormLanguages components.

Basic Usage

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

<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
<FormLanguage language="English" ... />

The display name of the language.

code

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

The language code.

view

  • Type: string
<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: component
  • 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: component
  • Group: inject

The root form's component.

Methods

The methods of the component.

.select()

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.