Enlace de entrada de formulario Vue.js con opción de casilla de verificación

Vue.js es un marco javascript progresivo para desarrollar interfaces de usuario web. Es un marco versátil que proporciona alta velocidad y rendimiento. Podemos crear aplicaciones de una sola página, así como aplicaciones de pila completa.

El enlace de entrada se utiliza para sincronizar y mantener el estado de los elementos de entrada del formulario con el estado correspondiente en javascript. Entonces, Vue.js proporciona una directiva de modelo v que facilita la tarea de mantener el estado de los formularios mediante una implementación simple.

El enlace de entrada con la opción de casilla de verificación usa la propiedad marcada y cambia el evento para la directiva v-model. Podemos usar una sola opción o varias opciones para el elemento de casilla de verificación. 

Sintaxis:

• Para una sola casilla de verificación:

data() {
  return {
    checked: '',
  }
},

<input v-model="checked" type="checkbox" name="check" />
<label for="check">{{checked}}</label>

• Para casilla de verificación múltiple:

data() {
  return {
    tutorials: [],
  }
},

<input type="tutorials" id="Option1" value="Option1" v-model="checkedNames" />
<label for="Option1">Option1</label>

<input type="tutorials" id="Option2" value="Option2" v-model="checkedNames" />
<label for="Option2">Option2</label>

<input type="tutorials" id="Option3" value="Option3" v-model="checkedNames" />
<label for="Option3">Option3</label>

Ejemplo : en el siguiente ejemplo, tenemos varias casillas de verificación que usan la directiva v-model para el enlace de entrada. Para varias casillas de verificación, almacenamos el valor de la entrada dentro de una array y se hace usando el propio modelo v .

Paso 1 : Cree un nuevo proyecto Vue.js utilizando el administrador de paquetes npm node.js.

npm init vue@latest

Ingrese el nombre del proyecto y preestablezca el proyecto de la siguiente manera.

 

Estructura del proyecto : después de una instalación exitosa, se mostrará la siguiente estructura del proyecto.

Estructura del proyecto

Paso 2 : dentro del archivo App.vue , en la sección de datos del archivo de secuencia de comandos, agregue los tutoriales de miembros de datos y verifique cuáles se utilizarán para el modelo v.

<script>
export default {
  data() {
    return {
      checked: '',
      tutorials: [],
    }
  },
}
</script>

Paso 3: para implementar la casilla de verificación única con el modelo v marcado, podemos seguir el siguiente código:

<center>
    <input v-model="checked" type="checkbox" name="check" />
    <label for="check">{{ checked }}</label>
  
    <p>Tutorials:{{ tutorials }}</p>
</center>

Paso 4: para implementar las múltiples casillas de verificación para seleccionar varios elementos usando un solo modelo v, seguiremos como se muestra a continuación:

<template>
  <center>
    <h1 style="text-align: 
        center; color: green">
        GeeksforGeeks
    </h1>
    <strong>
        Vue.js Form Input Value Binding with Checkbox option
    </strong>
    <br />
  </center>
  <center>
    <input
      v-model="tutorials"
      type="checkbox"
      value="Data Structures"
      name="ds"/>
    <label for="ds">Data Structures</label><br />
    <input v-model="tutorials" 
           type="checkbox" 
           value="Algorithms" 
           name="al" />
    <label for="al">Algorithms</label><br />
    <input
      v-model="tutorials"
      type="checkbox"
      value="Machine Learning"
      name="ml"/>
    <label for="ml">Machine Learning</label>
    <p>Tutorials: {{ tutorials }}</p>
  </center>
</template>

Paso 5: Ejecute el proyecto usando el siguiente comando y vea el resultado.

npm run dev

Ejecutará el proyecto en http://localhost:3000/ y el resultado será el siguiente.

Producción:

 

Referencia: https://vuejs.org/guide/essentials/forms.html#checkbox