テック-Vue.js
普段、非同期でデータを取ってきてデータを表示する時は、createdライフサイクルで非同期でこと足りるんだけど、$router.pushで同じコンポーネントに遷移しようとした場合、mount済みコンポーネントを再利用しようとして、created, mountedなんかが呼び出さ…
vue + bootstrapで構成したページ。 signin成功時に this.$router.push("/"); いつも通りvue-routerにpushするも、遷移先のページでbootstrapのJQueryが動作しない...。 ブラウザをリロードすると動作するんだけど(^_^;) ググってみるとRailsにはそういった…
作業途中だけどメモしておきます。 管理画面テンプレートのCoreUIのコンポーネントを既存Vue(TS)なプロジェクトで利用可能にする。まで。 一から作る場合は、https://github.com/coreui/coreui-free-vue-admin-template のプロジェクトをcloneなんかしてカス…
ハマったのでメモしておきます。 利用したVueはCDNの <script src="https://cdn.jsdelivr.net/npm/vue@3.0.0/dist/vue.global.js"></script> v-for内にrel属性を配置すると$refsに配列で参照できることを期待したんだけどうまく行かなかった。 <tr v-for="(item, index) in items"> <td> <span v-if="!item.editable" @click="edit(item, index)">{{ item.name }}</span> </td></tr>
よく忘れるのでメモしておきます。 以下の例ではObject型と定義したPosition型を持つdataプロパティの型定義の例。 export type Position = { lat: number, lng: number } export default Vue.extend({ data () { return { myProperty: {} as Object, balloo…
TypeScriptでVueを記述していた時、this.propertyの参照が Property 'property' does not exist on type のようなエラーが出て、buildに失敗するような挙動になりました。 Vueインスタンスとしてコンポーネントを定義する export default { name: 'myPage', …
vuetifyを使用する vuetifyはvue create後にaddするので、typescript.jsonにcompile typeの記述が必要なようです。 typescript.json、compilerOptions.typeにvuetifyを追記 "types": [ "webpack-env", "mocha", "chai", "vuetify" ], vue2-google-mapsを使用…
WebAPIとして動作しているPlayframeworkにmultipartでJsonとファイルデータを送信します。 Vue側の実装 template axiosでPOSTするので、formにはmultipartをつけず、prevent指定でページロードしないように制御する。 <template> <form> <input type="text" v-model="shopMame"> <input @change="changeFile" type="file" name="upfile[]" multiple accept="image/*" /> </form></template>
フォーム選択した画像をブラウザ上にプレビュー表示する。 アップロードフォーム <form enctype="multipart/form-data"> <div> <input @change="changeFile" type="file" name="upfile[]" multiple accept="image/*" /> <img v-for="(img, idx) in uploadedImage" :key="idx" :src="img.src" /> </div> </form> のようなマークアップを記述する。 accept="image/*"を指定しておくとスマートフォン…
技術評論社 Vue.js入門 基礎から実践アプリケーション開発まで を完走した。 自分は以前に他の入門書一冊を済ませているので基本的な文法や考え方は理解していたつもり。反面、コンポーネントの設計や応用をもう少し勉強したかったので購入した。 (function(…
Vue.jsコンポーネント化されたGoogleMaps、vue2-google-mapsを使用する。 github.com www.npmjs.com API Keyの取得 まずはgoogle developer console、 Google Cloud Platform からAPI Key取得する。 projectを作成、または選択して ライブラリ - Maps JavaSc…
経緯 LAN内のスマートフォンなどの他の端末から開発中アプリに接続し、確認したかった。 デフォルトでの起動はlocalhostとなるので、例えば開発中PCのIPアドレスが192.168.0.1だったとして、http://192.168.0.1:8080としても起動しているサーバ名がlocalhost…
vue-test-utils を使用する テストモジュールと対象のコンポーネントのimport import { mount } from '@vue/test-utils' import hogeButton from '@/components/hogeButton.vue' テストケースの記述 describe() & it() describeに、テストの区分けやテストケ…
Vue-cliでe2eのテストを実行した時、以下のエラーが表示された。 message: 'session not created: Chrome version must be between 71 and 75 表示の通り、起動対象のChromeとdriverが対応しているChromeのバージョンが合っていないので合わしてやる必要があ…
例えば、古いJSライブラリでLint絡みなどでmodule exportが出来ない場合とか。 理屈はわからんが、出来ないことはない。publicにhtmlがある前提で。 解決方法 HTMLファイル public/html ファイル。通常通りscript srcで外部JSファイルを読み込む。 <html lang="en"> <head> <script src="hoge.js"></script> ... </head></html>…
勉強したことメモ。 子コンポーネントにHTML要素やinnerTextを渡したい場合、slotを利用できる。 例えば、 <header-component> <h1 slot="header">ここから<div>div要素も含めて</div>ここまで。</h1> </header-component> のように定義すると、子コンポーネントから<slot name="header"></slot>とすることで、要素を差し替えることができる。 Vue.component('hea…
ブラウザを閉じたりリロードした後でも、登録、更新を行ったissueを再度表示できるようにする。 ストレージはローカル内で保存管理するものとし、サーバに送信したり取得したりといったことは行わない。 Vueでの処理 プロパティ issueList が追加、変更され…
こういったVueオブジェクトが定義されていた場合、arrayListに何らかの操作が行われた時に発火するメソッドを定義できる。 var app1 = new Vue({ el: '#app1', data: { arrayList: [] } }); watch メンバの定義 watchメンバの中に監視するプロパティとchange…
Vueオブジェクトは以下のライフサイクルがあり、各ポイントに応じて処理を実行することができる。 beforeCreate : Vueインスタンスが作成される直前 created : インスタンスの作成が完了 beforeMount : element(el: "id")にマウントされる直前 mounted : ele…
イメージ 状態は["new", "assigned", "closed"]の三種類とした。 Vue実装 プルダウンはloop生成 var app1 = new Vue({ el: '#app1', data: { statusList: ["new", "assigned", "closed"], ...略 issueオブジェクトにチケット状態を持つプロパティを追加 meth…
画面イメージ HTML v-showで表示される要素の中に削除ボタンを設置した。 削除ボタンのv-on:click.stopは.stopをつけることによってli要素のv-on:clickのメソッド呼び出しを抑制できる。これをつけないと親要素のv-on:clickも発火しておかしな挙動になる。 d…
入れ子になった要素で、親、子ともにv-on:clickなんかのイベントを持っている時、子の要素をクリックすると親の要素のイベントの発火する。 例えばこんなの。親divで何らかのイベント定義あり、divに入ったボタンがあるケース。divがアコーディオンになって…
アプリイメージ 入力を行うと 下のエリアにissueが表示 issueタイトルを押下するとコメントが表示される。 複数のissueを登録できる。 削除とステータスの更新は今回では作成しない。 HTMLの記述 入力フォーム部分 今までの復習。各入力部品に対応する値をv-…
v-modelの修飾子 v-onと同様、v-modelにも修飾子を記述できる。 .lazy : 入力の完了時にバインドする。 .number : 数値型に変換 .trim : 前後のスペースを取り除く .lazy 入力の完了時(Enterキーの押下やフォームからカーソルフォーカスが外れた時)にバイン…
v-on:click 基本形 入力された値をボタン押下でリスト表示する。 <div id="app1" class="frame"> <h1>イベントハンドラ</h1> <input type="text" name="textData" v-model="textData"><button name="send" v-on:click="addData">送信</button> <ul> <li v-for="item in listData">{{item}}</li> </ul> </div> var app1 = new Vue({ el: '#app1', data: { textD…
v-forで配列要素の走査 配列要素を走査して出力する。 liの部分がmonthList数分、繰り返される。 <div id="app1" class="frame"> <ul> <li v-for="month in monthList">{{month}}月</li> </ul> </div> var app1 = new Vue({ el: '#app1', data: { monthList: [1,2,3,4,5,6,7,8,9,10,11,12] } }); foreach {k,v}ライクな使い方 (value, key)の順…
v-if で要素の出力制御を行う v-ifの値がtrueの時に、要素の表示を行う。 <div id="app1" class="frame"> <h2 v-if="show">v-ifのサンプル</h2> <button v-on:click="show = !show">タイトルを{{buttonLabel}}</button> </div>
計算マクロはcomputedプロパティとして定義することができる。 <div id="app1" class="frame"> <h2>立方体の体積:1辺の長さ{{ side }}の体積は、{{ side**3 }} </h2> <h2>computedで計算:1辺の長さ{{ side }}の体積は、{{ volume }} </h2> </div> var app1 = new Vue({ el: '#app1', data: { side: 5 }, computed: …
v-bind:style style属性にbindする var app1 = new Vue({ el: '#app1', data: { titleFontColor: "red", h2Color:"blue" } }) HTMLにはオブジェクトを埋め込む。styleのキー要素は-(ハイフン)がキャメルケースとなる。 <h2 v-bind:style="{color:titleFontColor, backgroundColor:h2Color}">Title</h2> または、クォートすればstyleの…
v-bind:要素名 要素名に対して値をバインドする var app1 = new Vue({ el: '#app1', data: { yahooURL:"http://yahoo.co.jp/" } }) <h2><a v-bind:href="yahooURL">yahooへ</a></h2> <h2><a :href="yahooURL">v-vindを省略したこの記述も等価</a></h2> v-bindで複数の要素をバインドする const imageURL = "https://assets.media-platf…
