A entrada list permite estruturar dados de entradas filhas como um array. A lista em si não gera nenhuma marcação (por padrão) e pode ser usada em conjunto com qualquer outro tipo de entrada - incluindo grupos e listas aninhadas.
O valor de uma entrada de lista é um array onde cada item é o valor da entrada naquele índice. As sub-entradas não precisam ser do mesmo tipo. Além de estruturar dados, as listas podem determinar o estado de validação, fornecer valores iniciais e fornecer plugins e configuração para todos os seus filhos.
O útil v-model do Vue é totalmente suportado no FormKit com fluxo de dados bidirecional, mesmo em listas e grupos. No entanto, se o seu formulário precisa de uma performance extremamente alta, considere usar o nó central para ler/escrever em vez do v-model.
Existem 2 tipos de listas:
As listas estáticas são o tipo mais simples de lista para criar. Envolva quaisquer entradas em um <FormKit type="list"> e essas entradas serão automaticamente definidas como valores de seu array. Os filhos imediatos das listas não têm um nome (mesmo que especificado), em vez disso, eles são sempre identificados por seu índice. Em uma lista estática, este índice é estável e é baseado na ordem das entradas.
As listas estáticas não devem ser usadas para iterar sobre seu próprio valor. Embora seja seguro iterar sobre outros dados arbitrários, iterar sobre o valor da lista em si causará renderização recursiva e loops infinitos. Em vez disso, use uma lista dinâmica.
As listas dinâmicas permitem que você itere sobre os valores da lista para criar e hidratar as entradas dentro da lista. As listas dinâmicas são úteis para criar estruturas de array dinâmicas, como repetidores.
Você pode alterar a estrutura da sua lista dinâmica adicionando e removendo itens do array de valor. O FormKit atualizará automaticamente a estrutura do formulário subjacente para corresponder ao novo valor.
Para que as listas dinâmicas mantenham seus dados sincronizados, você deve usar items do slot padrão para criar seu v-for e também deve passar o index do v-for como a prop index para cada item da lista.
Para usar um repetidor pré-construído, confira a entrada de repetidor gratuita do FormKit Pro.
As listas (e grupos) estão sempre cientes do estado de validação de seus filhos (incluindo filhos aninhados). Você pode acessar esses dados no objeto context do input (context.state.valid).
Embora uma lista possa ter regras de validação e erros de input, ela não inclui nenhuma funcionalidade para mostrar mensagens de validação e erros por padrão. A lista não envia nenhum HTML. Se você quiser exibir esses erros - você pode adicionar o <FormKitMessages /> como um filho da lista.
Mais documentação sobre o componente FormKitMessages pode ser encontrada na página de documentação do formulário.
| Prop | Type | Padrão | Descrição |
|---|---|---|---|
| disabled | Boolean | false | Desativa todos os inputs na lista. |
| dynamic | Boolean | false | Habilita o modo dinâmico para a lista e fornece items no slot padrão criando um iterador (v-for). |
| Mostrar Universal props | |||
| config | Object | {} | Opções de configuração a serem fornecidas para o nó do input e qualquer nó descendente deste input. |
| delay | Number | 20 | Número de milissegundos para debounce do valor do input antes de despachar o commit hook. |
| dirtyBehavior | string | touched | Determina como o indicador "dirty" deste input é definido. Pode ser configurado como touched ou compare - touched (o padrão) é mais performático, mas não detectará quando o formulário corresponder novamente ao seu estado inicial. |
| errors | Array | [] | Array de strings para exibir como mensagens de erro neste campo. |
| help | String | '' | Texto para o texto de ajuda associado ao input. |
| id | String | input_{n} | O ID único do input. Fornecer um ID também permite acesso global ao nó do input. |
| ignore | Boolean | false | Impede que um input seja incluído em qualquer pai (grupo, lista, formulário etc). Útil ao usar inputs para a interface do usuário em vez de valores reais. |
| index | Number | undefined | Permite que um input seja inserido no índice fornecido, se o pai for uma lista. Se o valor do input for indefinido, ele herda o valor dessa posição de índice. Se ele tiver um valor, ele o insere nos valores da lista no índice fornecido. |
| label | String | '' | Texto para o elemento label associado ao input. |
| name | String | input_{n} | O nome do input como identificado no objeto de dados. Isso deve ser único dentro de um grupo de campos. |
| parent | FormKitNode | contextual | Por padrão, o pai é um grupo, lista ou formulário de envolvimento, mas essa prop permite a atribuição explícita do nó pai. |
| prefix-icon | String | '' | Especifica um ícone para colocar na seção prefixIcon. |
| preserve | boolean | false | Preserva o valor do input em um grupo pai, lista ou formulário quando o input é desmontado. |
| preserve-errors | boolean | false | Por padrão, os erros definidos em inputs usando setErrors são automaticamente limpos no input. Definir essa prop como true mantém o erro até que ele seja explicitamente limpo. |
| sections-schema | Object | {} | Um objeto de chaves de seção e valores parciais de esquema, em que cada esquema parcial é aplicado à seção respectiva. |
| suffix-icon | String | '' | Especifica um ícone para colocar na seção suffixIcon. |
| type | String | text | O tipo de input a ser renderizado pela biblioteca. |
| validation | String, Array | [] | As regras de validação a serem aplicadas ao input. |
| validation-visibility | String | blur | Determina quando mostrar as regras de validação com falha de um input. Os valores válidos são blur, dirty e live. |
| validation-label | String | {label prop} | Determina qual rótulo usar nas mensagens de erro de validação, por padrão, usa a propriedade label, se disponível, caso contrário, usa a propriedade name. |
| validation-rules | Object | {} | Regras de validação personalizadas adicionais para disponibilizar na propriedade de validação. |
| value | Any | undefined | Inicializa o valor do input e/ou de seus filhos. Não é reativo. Pode inicializar grupos inteiros (formulários) e listas.. |
| Section-key | Descrição |
|---|---|
| outer | O elemento de envolvimento mais externo. |
| wrapper | Um invólucro ao redor do rótulo e do input. |
| label | O rótulo do input. |
| prefix | Por padrão, não gera saída, mas permite conteúdo diretamente antes de um elemento input. |
| prefixIcon | Um elemento para gerar um ícone antes da seção de prefixo. |
| inner | Um invólucro ao redor do próprio elemento input. |
| suffix | Por padrão, não gera saída, mas permite conteúdo diretamente após um elemento input. |
| suffixIcon | Um elemento para gerar um ícone após a seção de sufixo. |
| input | O próprio elemento input. |
| help | O elemento que contém o texto de ajuda. |
| messages | Um invólucro ao redor de todas as mensagens. |
| message | O elemento (ou muitos elementos) que contém uma mensagem - na maioria das vezes mensagens de validação e erros. |