Trabalhar com formulários

• 5 minutos

Os dados retornados pela função data() em um aplicativo ou componente Vue são chamados genericamente de estado. O estado é qualquer informação que o aplicativo precisa rastrear para executar as operações necessárias. Normalmente, os usuários modificam o estado por meio de formulários HTML. O Vue.js permite que você associe dados a um formulário para que os usuários possam atualizar o estado.

v-model

A diretiva v-model cria uma vinculação bidirecional entre um controle HTML e os dados associados. Assim, sempre que for atualizado no formulário, o valor será atualizado dentro do estado do aplicativo. A diretiva v-model dá suporte à associação a qualquer controle de formulário, incluindo caixas de seleção, caixas de texto e listas suspensas.

Para todos os exemplos nesta unidade, você usará o aplicativo Vue a seguir.

Vue.createApp({
    data() {
        return {
            name: 'Cheryl',
            status: -1,
            active: true,
            benefitsSelected: 'yes',
            statusList: [
                'full-time',
                'part-time',
                'contractor'
            ]
        }
    }
})

Associação a caixas de texto

Para associar a uma caixa de texto, use a diretiva v-model.

<input type="text" v-model="name" />

A propriedade name é atualizada sempre que o valor da caixa de texto é alterado. Se você quiser usar textarea, a sintaxe será a mesma e você usará v-model="name" assim como antes.

Associação a caixas de seleção

Normalmente, valores boolianos são associados a caixas de seleção. As caixas de seleção permitem alternar a opção. Para associar a opção active, você pode usar v-model assim como fez antes.

<input type="checkbox" v-model="active" /> Is active

Ocasionalmente, a alternância não é um valor booliano. Em vez disso, você pode ter duas opções, como sim e não. Nesse caso, você pode usar true-value e false-value para indicar o valor associado para a caixa de seleção selecionada (true) ou desmarcada (false).

<input type="checkbox" v-model="benefitsSelected" true-value="yes" false-value="no"> Benefits selected: {{ benefitsSelected }}

Listas suspensas

Em HTML, você cria listas suspensas em duas partes. Você usa select para criar a lista e option adicionar opções. A marca select armazena o valor selecionado da lista suspensa, de modo que você a usa para associar ao seu modelo.

No Vue, você precisa:

• Criar uma lista de opções. Para criar a lista de elementos option, use v-for para executar um loop e crie um elemento de opção para cada item na matriz.

• Identificar o valor. Para cada opção que criar, você precisa identificar o valor. Se a lista é apenas uma matriz de cadeias de caracteres, por exemplo, você deve armazenar a cadeia de caracteres ou o índice selecionado como um valor. Veja um exemplo:

  <select v-model="selectedIndex">
     <option v-for="(stringItem, index) in arrayOfStrings" :value="index"> 
     {{}}
     </option>
  </select>
  

  Se a lista armazenar uma matriz de objetos, aponte a propriedade de exibição e onde encontrar o valor.

  <select v-model="selectedValue">
     <option v-for="item in items" :value="item.value">
     {{ item.displayProperty }}
     </option>
  </select>  
  

• Acompanhar o valor selecionado. Você pode associar o valor selecionado à marca select usando v-model. Aqui, você pode acompanhar o índice ou o valor do item. Fica a seu critério.

Para criar a lista de opções, use v-for para executar um loop na lista. Em seguida, escolha definir o valor como o índice do item na matriz. Use v-for(status, index) in statusList para fornecer o índice para cada item. Depois, defina o :value de cada opção como index e exiba status como a opção para o usuário.

<select v-model="statusIndex">
    <!-- Create a message to select one -->
    <option disabled value="">Please select one</option>
    <!-- Use v-for to create the list of options -->
    <option v-for="(status, index) in statusList" :value="index">
        {{ status }}
    </option>
</select>

Por fim, adicione v-model="statusIndex" para garantir que, quando um usuário selecionar um item, o valor da propriedade de dados statusIndex seja atualizado para o índice selecionado.