はじめに watchは特定のデータや算出プロパティの状態の変化を監視して、変化があったときに登録した処理を実行するプロパティ。 データや算出プロパティの変更が処理のトリガー（きっかけ）となる。 使い方 watchオプションに監視するデータの名前と変化した時に呼び出されるハンドラ（関数）を定義する。 データの比較が必要な場合は、第1引数として新しい値、第2引数として古い値が受け取れる。 ※ここではインスタンスが生成されると同時にwatchが呼び出されている。 基本的な書き方 new Vue({ watch: { 監視するデータ: function(新しい値, 古い値) { // データが変化した時に行いたい処理 }, // ↓ オブジェクトのプロパティも監視できる 'item.value': function(新しい値, 古い値) { // 処理 } } })
時間がある時にもう少し加筆します。 結論 computedで非参照のコピーを作って、そのcomputedをwatchする。 <script> let vm = new Vue({ data: { human: { name: null, age: null, height: null, weight: null } }, computed: { computedHuman () { // 何らかの方法で非参照のコピーを作る return JSON.parse(JSON.stringify(this.human)) // ↓その他 // return Object.assign({}, this.human) // return lodash.cloneDeep(this.human) } }, watch: { computedHuman: { deep: true, handler(ne
vue-routerだと同じルーティングに当てはまるものは再利用されるようにできている。beforeRouteUpdate()を使えばそれをhookできるが状態の管理やnext()を呼び出し忘れを気にしないといけないなど効率化の反面バグを産みやすいと思う。そこで新しいコンポーネントを作れるようにしたい。
これは、個人ブログ からの転用です ROXXに入って学んだことの1つです。 概要 Vue.js で 親コンポーネントの method 実行させたい場合、$emit 使ってイベントを発火させるより、 props に method をコールバックとして登録しておいて実行させたほうが以下のメリット上げられるので「こっちのほうが良くね？」って話です props の成約をつけられる(requird, etc) $emit の文字列を管理しなくていい IDEで補完が効く 実際のコード ボタン押したらカウントアップしていくようなやつ 呼び出し側の親コンポーネント <template> <div> <div>{{ count }}</div> <child :handle-add-number="addCount" @addNumber="addCount" /> </div> </template> <
Configuration file, design tokens, toast notifications and more!Your next Vue.js project deserves the best developer experienceInkline is the intuitive UI Components library for building high-quality, developer-friendly, configurable, and accessible Vue.js Design Systems. More than just a UI LibraryWhile many UI libraries focus solely on UI and UX, they often overlook the most crucial element - th
お久しぶりです、気を失っている間に iOS エンジニアではなくなっていた happy_ryo です。 意識を取り戻してからは Instagram と Twitter の API をガンガン叩きながら、Laravel と Vue.js たーのしー！している毎日です。 表題の通り、Vue.js で input タグを用いたファイルのアップロードをする方法をまとめておきます。 環境は Vue.js 2.0 以上、通信には axios を使用します。 input タグの type が file の場合、File に対して readonly 制約がついている関係で v-model で双方向バインディングを構築することが出来ないため、File inputs are read only. Use a v-on:change listener instead.という警告が表示され、値を正確に取得する事が出
はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 現在は構築したシステムを保守・運用しており、その際に得られたノウハウを言語化し、共有出来たらと思います。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ※ パフォーマンスの話はしません。 ゴール 役立つTipsを身につけコード品質を向上させる コンポーネントのバグを減らせるTips ほとんどのバグは変数から来ます。 もし全ての値が定数なら状態から来るバグはほとんど無くなるでしょう。 ここではこの変数や式を極力減らせるTipsを紹介したいと思います。 1. dataを極力定義しない Vue.jsでコンポーネントを定義する際ついdata()に沢山変数を定義しちゃいますよね。
脱jQueryという主張をよく耳にします。 私の個人プロジェクト「Beautifl - Flash Gallery」のリニューアルでも、依存しまくっていたjQueryの採用をやめました。 サイトを立ち上げたのは8年前の2009年。最盛期のjQueryをふんだんに使って、インタラクションの充実したRIAの開発に挑戦していました（参照「wonderflのギャラリーサイトBeautiflを作りました」）。 この記事では、なぜjQueryをやめようと思ったのか、別の技術で得たものは何なのかを紹介します。 ▲リニューアルしたBeautiflは、jQueryをすべて抜きました ※この記事は「CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA」に対する後編（JavaScript編）となります。 リニューアルにあたってJavaScriptで改善したかったこと リニューアルにあたって
Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。 レガシーなDrupalのシステム（qwintry.com） ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム（logistics.qwintry.com） その他、比較的小さめのプロジェクト（ほとんどは、PHPとNode.jsでバックエンドを構築しているもの） プロジェクトの規模についていうと、 Qwintry は世界中で約50万人の顧客が使っています。アメリカとドイツに倉庫を持っていて、アメリカ国内 最大の郵送先 のひとつで、東欧や中東への出荷に注力しています。Qwintryは、アメリカのオンラインストアでグッズを購入する人たちのためのツールです。私たちの倉庫に届いた荷物をコントロールパネルで管理で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く