新型コロナウイルスのさまざまな変異株に対する抗体の量を1滴の血液から8分で測定できるシステムを開発した、と理化学研究所(理研)などの研究グループが発表した。
どんな新型コロナ変異株の抗体量も血液1滴で判定 理研、8分で分かる自動測定システムを開発 | Science Portal - 科学技術の最新情報サイト「サイエンスポータル」
⇧ 検査費用とか気になりますな...
VeeValidateをElement UI で使ってみる
VeeValidateのドキュメントを見ると、
⇧ Element UIと一緒に使えるということで試してみます。
Element UIのインストール方法は、
⇧ 上記のドキュメントで確認できます。
Vue.jsのプロジェクトは、
⇧ 上記の記事で作成したものを利用していきます。
ということで、Element UIをインストールします。
インストールが済むと、package.jsonのdependenciesに追加されてるのが確認できます。
そしたらば、修正した部分のソースコード。
■C:\Users\Toshinobu\Desktop\soft_work\vue_work\vue-vee-validate\hello-world\src\main.ts
import Vue from "vue"; import App from "./App.vue"; import "./registerServiceWorker"; import router from "./router"; import store from "./store"; import { ValidationObserver, ValidationProvider } from "vee-validate"; import ElementUI from "element-ui"; import "element-ui/lib/theme-chalk/index.css"; import { extend } from "vee-validate"; import * as rules from "vee-validate/dist/rules"; Object.keys(rules).forEach((rule) => { extend(rule, rules[rule as keyof typeof rules]); }); // with typescript for (const [rule, validation] of Object.entries(rules)) { extend(rule, { ...validation, }); } Vue.config.productionTip = false; Vue.use(ElementUI); // Register it globally Vue.component("ValidationProvider", ValidationProvider); Vue.component("ValidationObserver", ValidationObserver); new Vue({ router, store, render: (h) => h(App), }).$mount("#app");
■C:\Users\Toshinobu\Desktop\soft_work\vue_work\vue-vee-validate\hello-world\src\views\user\index.vue
<template> <div> <ValidationObserver ref="observer" v-slot="{ handleSubmit }"> <el-form ref="form" label-width="120px"> <ValidationProvider rules="required|email" name="Email" v-slot="{ errors }" > <el-form-item :error="errors[0]" label="Email"> <el-input v-model="email" /> </el-form-item> </ValidationProvider> <ValidationProvider rules="required" name="Password" vid="password" v-slot="{ errors }" > <el-form-item prop="pass" :error="errors[0]" label="Password"> <el-input type="password" v-model="password" /> </el-form-item> </ValidationProvider> <ValidationProvider rules="required" name="Subject" v-slot="{ errors }"> <el-form-item :error="errors[0]" label="Subject"> <el-select v-model="subject" placeholder="Select Subject"> <el-option label="None" value></el-option> <el-option label="Subject 1" value="s1"></el-option> <el-option label="Subject 2" value="s2"></el-option> </el-select> </el-form-item> </ValidationProvider> <ValidationProvider rules="required|length:2" name="Drinks" v-slot="{ errors }" > <el-form-item :error="errors[0]" label="Drinks"> <el-checkbox-group v-model="choices"> <el-checkbox label="Coffee"></el-checkbox> <el-checkbox label="Tea"></el-checkbox> <el-checkbox label="Soda"></el-checkbox> </el-checkbox-group> </el-form-item> </ValidationProvider> <el-form-item> <el-button type="primary" @click="handleSubmit(onSubmit)" >Create</el-button > <el-button @click="resetForm">Reset</el-button> </el-form-item> </el-form> </ValidationObserver> </div> </template> <script lang="ts"> /* eslint-disable no-console */ import { Component, Vue } from "vue-property-decorator"; @Component({ components: {}, }) export default class User extends Vue { private email = ""; private password = ""; private confirmation = ""; private subject = ""; private choices = []; private onSubmit() { const isValid = (this.$refs.observer as any).validate(); console.log(isValid); } private resetForm() { this.email = ""; this.password = ""; this.confirmation = ""; this.subject = ""; this.choices = []; this.$nextTick(() => { (this.$refs.observer as any).reset(); }); } } </script> <style lang="scss" scoped> ::v-deep { .el-form-item__content { text-align: left !important; } } </style>
⇧ で保存。
@click="handleSubmit(onSubmit)"
⇧ の部分については、
Validating forms before submitting is a must in form validation. The ValidationObserver
offers a handleSubmit
function that you can use to protect your form submissions. This handleSubmit
function accepts a submit handler and will only execute the handler once the user submits a valid form.
https://vee-validate.logaretm.com/v3/guide/forms.html#validate-before-submit
⇧ ということで、handleSubmitは、VeeValidateが用意してる関数らしい。
紛らわしいのが、
⇧ 普通のVue.jsのフォームで、
<template> <div> <form @submit.prevent="handleSubmit"> <input v-model="username" data-username> <input type="submit"> </form> <div class="message" v-if="submitted" > {{ username }}さん、お問い合わせ、ありがとうございます。 </div> </div> </template> <script> export default { name: "FormSubmitter", data() { return { username: '', submitted: false } }, methods: { handleSubmit() { this.submitted = true } } } </script>
⇧ handleSubmitって名前の関数を自分で定義してたりするという...
npm run serveで開発用サーバーを起動して、Formの入力でバリデーションの確認。
⇧ 正常に入力されてる場合、Createボタン押下で、デベロッパーツールの「Console」タブに表示されてるPromiseのPromiseStateが、"fulfilled" であれば、
const isValid = (this.$refs.observer as any).validate();
⇧ の処理が成功しているということらしいので、バリデーションは正常に実施されたということになるんではないかと。
TypeScriptのサンプルもドキュメントに載せて欲しいかな...
毎度モヤモヤ感が半端ない...
今回はこのへんで。