セレクトボックスの初期表示をする場合、hidden属性を持つoptionタグを最初に記載します。 pugとTypeScriptを使用しています。 <template lang="pug"> select(v-model="selectedPtn") option(value="" hidden) Choose // 初期状態で表示されるが、選択肢には表示されない option(v</template>…

備忘です。 v-forで要素数が変化（後で追加、削除を行う）する場合には、 keyにindexを用いてはいけないようです。 keyは要素の変更を、どのデータに対して行うべきか判別するために使われます。 v-forで生成されるindexをkeyに使った場合、要素の追加や削除…

次のように連想配列が定義されているとします。 data () { return { showEdit: {}, } }, 上記に対して、次のような処理を行っても変更結果がリアクティブになりません。 this.showEdit[id] = false; 次のように記述する必要があります。 this.showEdit = Obj…

クライアントとサーバーの通信を、クライアントではaxiosを用いる例です。 ユーザーに関する情報をサーバーでデータベースに保存しておき、 ログイン後のページで、そのデータを利用して表示を変えることを想定します。 例えば次のコードを見てみます。 goフ…

POSTまたはPUTのformデータをサーバーサイドに送信する際、 axiosでは、デフォルトでJSON形式にしてrequest payloadに乗せて送られます。 HTTP.Requestは次のようになっています。 POST /some-path HTTP/1.1 Content-Type: application/json { "username" : …

mixinを使うことで、どのコンポーネントでも「this.~」の形で、関数や変数computedなどを利用することができます。 下記のようにmixinsフォルダを作成し、その下にjsファイルを作成した方が管理しやすいでしょう。 build config src ... mixins globalValiab…

Vue-CLIを使ったhttps接続です。 build/webpack.dev.conf.jsを編集します。 見やすさのために一部を抜粋し、追加する2行についてコメントを記載しています。 'use strict' const utils = require('./utils') ... const fs = require("fs") // 追加。ファイル…

createElementの使用ケース OnsenUIのlazy loadを使用する際に使います。 私はまだこれ以外に使用した事がありません。 OnsenUIは、Javascript向けのUIライブラリで、手軽にネイティブアプリライクなUIを実現できます。 createElementを使用する事で、処理の…

過去に紹介したAtomic Designを、Vue.jsコーディングに当てはめて考えてみます。 tech-up.hatenablog.com Atoms ロジックを持たない Stateを持たない Storeを参照しない Molecules Storeを参照しない Atomsのイベントをハンドリング Atomsのプロパティ変更や…

XSS（クロスサイトスクリプティング）はVue.jsでも起きうるため、対策が必要です。 クロスサイトスクリプティング（英: cross site scripting）とは、Webアプリケーションの脆弱性[1]もしくはそれを利用した攻撃。*1 XSS対策をしていない場合、例えば、悪意…

Vue.js、Firebase、OnsenUIを使用した Progressive Web Appのリアルタイム「チーム日誌」アプリです。 ・カレンダー チームメンバーが編集したスケジュールが表示されます。 また、選択した日に提出した日誌が表示されます。 ・日誌 タイムライン表示とグル…