Cursos Empresas Blog Live Conf Precios

Manejo de formularios con Vue.js

Clase 7 de 17 • Curso Básico de Vue.js 2016

Contenido del curso

Fundamentos de Vue.js

Creando un Single Page App con Vue.js

Resumen

En este vídeo vamos a combinar filtros y manejo de eventos para crear una interacción de usuario a través de un formulario en un sitio web.

Mi código hasta esta clase

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
</head>
<body>
	<div id="app">
		<h1>{{ titulo | uppercase }}</h1>
		<h2>{{ subtitulo | lowercase }}</h2>
		<h3>{{ legend | capitalize }}</h3>
		<button @click="sumar" >sumar</button>
		<button @click="restar" >restar</button>
		<div>El contadore esta en {{contador}}</div>
		<!-- @keyup.enter="submit" :value="nombre" --> 
		<input v-model="nombre" type="text" name="nombre" placeholder="Ingresa tu nombre" />
		<p>Tu nombre en mayuscula es: {{ nombre | uppercase }}</p>
		<!-- <a v-if="mostrar" :href="url" target="_blank">Ir a {{ pagina }}</a> -->
		<form @submit.prevent="submit" action="">
			<h2>¿Cuales son tus cursos favoritos?</h2>
			<input v-model="cursos" type="checkbox" id="vue" value="vue" />
			<label for="vue">Curso de Vue.js</label>
			<input v-model="cursos" type="checkbox" id="react" value="react" />
			<label for="react">Curso de Reack.js</label>
			<input v-model="cursos" type="checkbox" id="seo" value="seo" />
			<label for="seo">Curso de SEO</label>
			<input v-model="cursos" type="checkbox" id="marketing" value="marketing" />
			<label for="marketing">Curso de Growth Marketing</label>
			<button type="submit">Enviar</button>
		</form>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data () {
				return {
					titulo: 'Estas viendo Platzi',
					subtitulo: 'Estas viendo el curso de Vue.js',
					legend: 'Esto esta en capitalize',
					nombre: '',
					contador: 0,
					cursos: []
				}
			},
			methods: {
				sumar (event) {
					this.contador++
				},
				restar (event) {
					this.contador--
				},
				submit (event) {
					console.log(this.cursos)
				}
			},
			filters: {
				uppercase: (str) => str.toUpperCase(),
				lowercase: (str) => str.toLowerCase(),
        		capitalize: (str) => str.replace(/\b\w/g, str => str.toUpperCase())
			}
		})
	</script>
</body>
</html>