Diferencia entre revisiones de «Usuario:ManuelRomero/Usuario:ManuelRomero/vuejs»
De WikiEducator
(Página creada con «===Controlar disabled/enabled de un submit con ckeckboox=== Tengo unos checkbox El submit se habilita o no según tenga alguno selecconado <source lang=html5> <!DOCTYPE ht...») |
(→Controlar disabled/enabled de un submit con ckeckboox) |
||
| Línea 5: | Línea 5: | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
| − | |||
<html lang="en"> | <html lang="en"> | ||
<head> | <head> | ||
| Línea 15: | Línea 14: | ||
<div id="app"> | <div id="app"> | ||
<form action=""> | <form action=""> | ||
| − | <input type="checkbox" value="a" name="c[]" @click="actualiza | + | <!--RECORDAR: |
| − | <input type="checkbox" value="b" name="c[]" @click="actualiza | + | @click=funcion //funcion que se ejecuta al ocurrir un click en el input |
| − | <input type="checkbox" value="c" name="c[]" @click="actualiza | + | v-on:click=funcion //Original de @ es una abreviatura |
| − | <input type="checkbox" value="d" name="c[]" @click="actualiza | + | v-model=variable //Liga de forma reactiva el valor del input con la variable |
| − | <input type="checkbox" value="e" name="c[]" @click="actualiza | + | --> |
| + | <input type="checkbox" value="a" name="c[]" @click="actualiza" v-model="c">a<br/> | ||
| + | <input type="checkbox" value="b" name="c[]" @click="actualiza" v-model="c">b<br/> | ||
| + | <input type="checkbox" value="c" name="c[]" @click="actualiza" v-model="c">c<br/> | ||
| + | <input type="checkbox" value="d" name="c[]" @click="actualiza" v-model="c">d<br/> | ||
| + | <input type="checkbox" value="e" name="c[]" @click="actualiza" v-model="c">e<br/> | ||
| + | |||
| + | <!--RECORDAR: | ||
| + | :atributo=variable //asocia de forma reactiva elvalor de la variable a este atributo | ||
| + | v-bind:atributo //Original de :, es una abreviatura | ||
| + | --> | ||
<input type="submit" value="enviar" :disabled="deshabilitado"> | <input type="submit" value="enviar" :disabled="deshabilitado"> | ||
| + | <!--Para ver los inputs seleccionados--> | ||
<h1>{{ c }}</h1> | <h1>{{ c }}</h1> | ||
| Línea 35: | Línea 45: | ||
}, | }, | ||
methods: { | methods: { | ||
| + | //No olvidar el this para acceder a las variables de la instancia de Vue | ||
actualiza: function (event) { | actualiza: function (event) { | ||
if (event.target.checked) | if (event.target.checked) | ||
Revisión de 09:11 13 nov 2017
Controlar disabled/enabled de un submit con ckeckboox
Tengo unos checkbox El submit se habilita o no según tenga alguno selecconado
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src='https://unpkg.com/vue'></script> </head> <body> <div id="app"> <form action=""> <!--RECORDAR: @click=funcion //funcion que se ejecuta al ocurrir un click en el input v-on:click=funcion //Original de @ es una abreviatura v-model=variable //Liga de forma reactiva el valor del input con la variable --> <input type="checkbox" value="a" name="c[]" @click="actualiza" v-model="c">a<br/> <input type="checkbox" value="b" name="c[]" @click="actualiza" v-model="c">b<br/> <input type="checkbox" value="c" name="c[]" @click="actualiza" v-model="c">c<br/> <input type="checkbox" value="d" name="c[]" @click="actualiza" v-model="c">d<br/> <input type="checkbox" value="e" name="c[]" @click="actualiza" v-model="c">e<br/> <!--RECORDAR: :atributo=variable //asocia de forma reactiva elvalor de la variable a este atributo v-bind:atributo //Original de :, es una abreviatura --> <input type="submit" value="enviar" :disabled="deshabilitado"> <!--Para ver los inputs seleccionados--> <h1>{{ c }}</h1> </form> </div> </body> <script type="text/javascript"> new Vue({ el: "#app", data: { c: [], deshabilitado: '', }, methods: { //No olvidar el this para acceder a las variables de la instancia de Vue actualiza: function (event) { if (event.target.checked) this.deshabilitado = false; else { var n = this.c.length; this.deshabilitado = ((n - 1) > 0) ? false : true; } } } }) </script> </html>
