monteecristoo’s blog

https://twitter.com/irakaarozo

Vuetifyを使って電話番号フォームのvalidation

updated: 2020/11/21

 

環境)

vue@2.6.12

vuetify@2.3.18

vuex@3.5.1

 

vuetifyのv-textfieldを使って電話番号のフォームvalidationを実装する

フォームのフィールドは電話番号全体で一つとするのではなく、ハイフンで区切って3つのフィールドを持つものとする。

 

         v-textfieldを使った場合,

valueNumber, strどちらでも指定で出来る

valueNumberをパスした場合、入力前はNumber、入力後はvaluestrとして処理される。

validationは数値をパスされた場合を考慮してString(v)または、v.toString()をしたほうが良い。(フィールドにstringとnumberの両方を想定している場合)

valueをあらかじめStringに変換しようとするとdataであれば値が空でも機能するがvuexを使用した場合undefinedとなってしまう。

type="number"を指定すると半角英数字しか入力を受け付けなくなる。この時、validation時はstringとして認識され、v.lengthが機能する。

 

 

 

value(電話番号等ユーザー情報)はデータとしてコンポーネントが単独で保持する場合は少なくvuex stateで管理することが想定される。

 

f:id:monteecristoo:20201122211008p:plain

f:id:monteecristoo:20201119210913p:plain 

computed: {

f:id:monteecristoo:20201119185942p:plain

}

 

rules: {

f:id:monteecristoo:20201119211103p:plain

}

フィールドがrequiredの場合は

!vを外す

 

また、フィールドをまたいだvalidationはvutifyでは無いため、3つのフィールドが入力された場合submit可能にするといったvalidationは別途作成する必要がある。

 

以下、フォーム内のフィールドが入力済みになり、かつinputに変更があった場合のみsubmit可とするvalidation

 

submitボタンをフィールドがそろわない場合disableにする。

<v-btn :disabled="!submitReady">Submit</v-btn>

 

computed: {
  submitReady() {

    if(!this.valid) {

      return false

    } else if(!this.editted) {

      return false

    } else {

      return true

    }

  }

}

// this.validは上述のrulesがvalidであるか、this.edittedはこれから新たに定義するvalidationのパラメータ

 

@input="userSettingEditted('phoneNumber' , form.phoneNumber.key, form.phoneNumber.value)"

 

f:id:monteecristoo:20201122211200p:plain

 

フィールドに値が入力されるrazyValueに値が挿入されるので値があるか確認

v-textfieldをv-forを使わないとrefを配列形式で取得できないためrefs.someが使えなくなる。

値の有無の判断を簡単にするため、textfieldはv-forを使う。

f:id:monteecristoo:20201122211616p:plain

ref)

jp.vuejs.org

 

 

VueJS: componentのdataを初期化する reset component datas

componentを初期化する方法に関して

 

solution1)

v-ifを使って初期化

solution2)

マニュアルでdataに初期値を割り当てる

ref)

qiita.com

 

temlate syntax内で条件分岐

三項演算子とテンプレート文字列を使う

<div :to="/foo?param=" + `${this.$store.state.something.status === "profile" ? "profile" : "home"}`>

ref:

developer.mozilla.org

stackoverflow.com

確かな力が身につくJavaScript「超」入門 第2版
 

 

Laravel-Cashier Chashierをインストールしてからphp artisan migrate をしたら SQLSTATE[42S21]: Column already exists: 1060 Duplicate column name 'stripe_id' …

Cashier に関するテーブルのcustomer, subscription, subscription_item はphp artisan migrate:reset してもテーブルがdropしないのでそのままphp artisan migrate:refreshすると上記タイトルのエラーが出る。

 

f:id:monteecristoo:20201022132359p:plain

laravel.comと公式にあるので上記を加筆したがどういうわけかエラーが収まらない。

 

solution)

一時的にmigrationsフォルダにサブフォルダを作ってcustomer, subscription, subscription_itemのマイグレーションファイルを退避させてからphp artisan migrate

 

related article)

monteecristoo.hatenablog.com

 

jensseger/laravel-mongodb 日付の取り扱い

環境:

jensseger/laravel-mongodb@3.7.0

 

f:id:monteecristoo:20201019092909p:plain

Moloquentを使用したmodelは、DB上にはデフォルトの設定ではMongoDB\BSON\UTCDatetimeで保管されている。

しかしキーにアクセスすると…

f:id:monteecristoo:20201019093318p:plain

timezoneがAsia/Tokyoで返るのはlaravelのconfig/app.phpでtimezone, localeをそれぞれAsia/Tokyo、ja に設定しているから。(設定後はphp artisan config:clearで反映)

 

Carbonで返ってくる。

例えばXXXX年XX月XX日という風に加工したければ、

return $o['created_at']->format('Y年m月d日');

 

これらを加味して…

$user = User::first();

// この時点ではBSON

$user['created_at'] = $user['created_at']->format('Y年m月d日');

return $user;

f:id:monteecristoo:20201019094737p:plain

となりエラーなので
$user['created_at_formatted'] = $user['created_at']->format('Y年m月d日');

unset($user['created_at']);

return $user;

 

 ref:

carbon.nesbot.com

 

 

canvas element を通常のイメージ扱いし、モバイル端末でタッチスクロールできるようにする

canvas で画像を composite し、生成された canvas を通常の img のように表示上をタッチスクロール可能にするためには…

 

環境:

vue@2.6.12

konva@7.1.3

 

canvas を dataURL に変換してcanvas と置換

⇒ キャンバスを一度画面にレンダリングした後でないと変換出来なかった。

 

solution)

canvas の上に overlay する element をかぶせる。

 

<div id="overlay" :class="{overlayZindex: overlayZindex}" :style="{width: stageSize.width + 'px', height: stageSize.height + 'px'}">

<div id="canvas">

 

mounted() {

  this.resizeStage() // get canvas stage width and height

  this.$nextTick(() => {

    this.loadKonva() // initialize konva canvas

    this.overlayZindex = true  // overlay に overlayZindex class を付与

  })

}

 

<style>

#overlay {

  position: absolute

}

#canvas {

  position: relative

  z-index: 1

}

.overlayZindex {

  z-index: 2

}

 

overlay に後付けで z-index を定義しているのは初めから z-index: 2 を定義すると stage size が取得できなかったため。

 

ref:

monteecristoo.hatenablog.com