add vuelidate
This commit is contained in:
YuukanOO
parent
c678841406
commit
67c2070343
@ -1,30 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vue js sans bundler !</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<!-- <p>Mon nom est {{ name }}</p> -->
|
||||
<greet v-bind:message="name"></greet>
|
||||
<input type="text" v-bind:value="name" v-on:input="name = $event.target.value" />
|
||||
</div>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vue js sans bundler !</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<!-- <p>Mon nom est {{ name }}</p> -->
|
||||
<greet v-bind:message="name"></greet>
|
||||
<input
|
||||
type="text"
|
||||
v-bind:value="name"
|
||||
v-on:input="name = $event.target.value"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
Vue.component('greet', {
|
||||
template: '<p>Mon nom est {{ message }}</p>',
|
||||
props: ['message']
|
||||
});
|
||||
<script>
|
||||
Vue.component("greet", {
|
||||
template: "<p>Mon nom est {{ message }}</p>",
|
||||
props: ["message"],
|
||||
});
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
name: 'julien',
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
name: "julien",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
5
vue2/package-lock.json
generated
5
vue2/package-lock.json
generated
@ -11021,6 +11021,11 @@
|
||||
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
|
||||
"dev": true
|
||||
},
|
||||
"vuelidate": {
|
||||
"version": "0.7.6",
|
||||
"resolved": "https://registry.npmjs.org/vuelidate/-/vuelidate-0.7.6.tgz",
|
||||
"integrity": "sha512-suzIuet1jGcyZ4oUSW8J27R2tNrJ9cIfklAh63EbAkFjE380iv97BAiIeolRYoB9bF9usBXCu4BxftWN1Dkn3g=="
|
||||
},
|
||||
"watchpack": {
|
||||
"version": "1.7.5",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
|
||||
|
||||
@ -10,7 +10,8 @@
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^2.6.11",
|
||||
"vue-router": "^3.4.9"
|
||||
"vue-router": "^3.4.9",
|
||||
"vuelidate": "^0.7.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
|
||||
@ -1,25 +1,78 @@
|
||||
<template>
|
||||
<form @submit.prevent="submitForm">
|
||||
<label for="firstname">Prénom</label>
|
||||
<input
|
||||
type="text"
|
||||
:class="{ 'has-error': $v.firstname.$error }"
|
||||
id="firstname"
|
||||
v-model="$v.firstname.$model"
|
||||
/>
|
||||
<div v-if="$v.firstname.$error">
|
||||
<p v-if="!$v.firstname.required">Ce champs est requis !</p>
|
||||
</div>
|
||||
|
||||
<label for="lastname">Nom</label>
|
||||
<input type="text" id="lastname" v-model="$v.lastname.$model" />
|
||||
|
||||
<label for="rememberme">Se souvenir de moi</label>
|
||||
<input type="checkbox" v-model="rememberMe" id="rememberme" />
|
||||
|
||||
<label for="lastnamerequired">Nom de famille requis</label>
|
||||
<input type="checkbox" v-model="lastnameRequired" id="lastnamerequired" />
|
||||
|
||||
<incrementer v-model="age" />
|
||||
|
||||
<p>Vous vous appelez : {{ firstname }} {{ lastname }}</p>
|
||||
<p v-if="rememberMe">On se souvient !</p>
|
||||
|
||||
<button @click.prevent="$emit('custom-event', new Date())">
|
||||
Envoyé événement personnalisé
|
||||
</button>
|
||||
<button type="submit">Envoyer</button>
|
||||
|
||||
<button type="submit" :disabled="isInvalid">Envoyer</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Incrementer from "./Incrementer";
|
||||
import { required } from "vuelidate/lib/validators";
|
||||
|
||||
export default {
|
||||
// data() {
|
||||
// return {
|
||||
// window,
|
||||
// };
|
||||
// },
|
||||
components: { Incrementer },
|
||||
data() {
|
||||
return {
|
||||
age: 18,
|
||||
rememberMe: false,
|
||||
firstname: "",
|
||||
lastname: "",
|
||||
lastnameRequired: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitForm() {
|
||||
alert("Formulaire envoyé");
|
||||
this.$router.push({ name: "home" });
|
||||
},
|
||||
},
|
||||
validations() {
|
||||
if (this.lastnameRequired) {
|
||||
return {
|
||||
firstname: {
|
||||
required,
|
||||
},
|
||||
lastname: {
|
||||
required,
|
||||
// sameAs: (v) => v === this.firstname,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
firstname: {
|
||||
required,
|
||||
},
|
||||
};
|
||||
},
|
||||
// beforeRouteEnter(to, from, next) {},
|
||||
};
|
||||
</script>
|
||||
|
||||
15
vue2/src/components/Incrementer.vue
Normal file
15
vue2/src/components/Incrementer.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>Valeur actuelle : {{ value }}</p>
|
||||
<button @click.prevent="$emit('input', value + 1)">+</button>
|
||||
<button @click.prevent="$emit('input', value - 1)">-</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: Number,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,5 +1,6 @@
|
||||
import Vue from "vue";
|
||||
import VueRouter from "vue-router";
|
||||
import Vuelidate from "vuelidate";
|
||||
import Layout from "./Layout.vue";
|
||||
import ComponentLayout from "./ComponentLayout.vue";
|
||||
|
||||
@ -22,6 +23,7 @@ const Link = () =>
|
||||
import(/* webpackChunkName: "link" */ "./components/Link.vue");
|
||||
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(Vuelidate);
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user