Vue.nextTickとは? callbackを延期し、DOMの更新サイクル後に実行します。DOM更新を待ち受けるために、いくつかのデータを変更した直後に使用してください。 VueはDOMを非同期に更新するため、「DOMを更新した後にその更新済みのDOMに対して何らかの処理をする」といったような場面でnextTickが役立ちます。 // single file component <template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'default' } }, mounted() { this.message = 'hello'; console.log(this.$el.textContent); // default この時点ではまだD
はじめに この記事では、単一のチェックボックスでオン/オフ(true/false)を表す場合と、複数のチェックボックスから値を取得できるコードを紹介します。 動作環境 Vue.js 2.6 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Practice</title> </head> <body> <div id="app"> <form> <label for="agree">規約に同意する</label> <input type="checkbox
v-for で配列に要素をマッピングする配列に基づいて、アイテムのリストを描画するために、v-for ディレクティブを使用することができます。v-for ディレクティブは item in items の形式で特別な構文を要求し、items はソースデータの配列で、item は配列要素がその上で反復されているエイリアスです: <ul id="example-1"> <li v-for="item in items" :key="item.message"> {{ item.message }} </li> </ul> var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) 結果: {{item.message}} v-for ブロック内で
※ 2020/04/13 drag, drop系を追記しました ※ 2020/07/22 formの内容を修正しました はじめに フロントエンド自体が初心者なので正直この辺りについては全然理解が追い付いてないです。 今回は簡単なサンプルを作りながら自分なり理解していこうと思います。 メソッドハンドラ Vue.jsでは「v-on」ディレクティブを用いることで要素にイベントリスナをバインドします。 イベント一覧 ※すべてではないです 。 click, dblclick クリック、ダブルクリック時に発火するイベントです。 See the Pen QJKKqL by b1san (@b1san1) on CodePen. keyup, keydown キーアップ、キーダウン時に発火するイベントです。 キー修飾子 キー修飾子を指定することで任意のキーのみでイベントを発火させることができます。 キーコ
VueJs でコンポーネントを作っていたら真っ白なページが表示されている。 コンソールを見るとこんなエラーが出ていた。 Uncaught RangeError: Maximum call stack size exceeded at Watcher.get (vue.esm.js?efeb:3156) at new Watcher (vue.esm.js?efeb:3131) ....何が原因かと小一時間悩んだ結果、コンポーネントの中で自分自身を呼び出していたのが原因だった。 例えば <template> <ErrorComponent></ErrorComponent> </template> <script> export default { name: 'ErrorComponent' } </script> 内部で ErrorComponent(自分自身) を呼び出さなければ解決。
Vueのイベントトリガをデバックコンソールで直接設定・発火させる 実際のところ vm.$on('test', function (msg) { console.log(msg) }) vm.$emit('test', 'hi') //=> hi一回だけしか実行しないONCEというのもあります vm.$once('testOnce', function (msg) { console.log(1) }) vm.$emit('testOnce', 'hi') //=> 1 vm.$emit('testOnce', 'hi') // *なにもでない*コンポネントで作成した子要素をアレコレしたい場合は 別途工夫が必要です。 参考もと Vue.js jp.vuejs.org
はじめにvue-routerのリファレンスに以下の記述があるが、どこまで再利用されるか気になったので調べた。 ルートのパラメーターを使う際に特筆すべき点は、ユーザーが /user/foo から /user/bar へ遷移するときに同じコンポーネントインスタンスが再利用されるということです。 両方のルートが同じコンポーネントを描画するため、古いインスタンスを破棄して新しいものを生成するよりも効率的です。しかしながら、これはコンポーネントのライフサイクルフックが呼ばれないことを意味しています。 検証環境package.json "dependencies": { "vue": "^2.5.2", "vue-router": "^3.0.1" } 検証プロパティが変更された場合まずはリファレンスに記述のある、コンポーネント内のプロパティの変更を試す。 ソースコードimport Vue from
忘れないように記録。 解決すべき問題 パラメータまたはクエリの変更は enter/leave ナビゲーションガードをトリガーしない 例えば検索クエリが変わっただけではコンポーネントは更新されない。 解決策 公式サイトに書かれている通り、beforeRouteUpdate(to, from, next)を使う。 /users?page=1から/users?page=2に移動するときなどに呼ばれる。 ページネーションのライフサイクル /usersという一覧画面を考える。 import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); import UserIndex from 'path/to/UserIndex'; const routes = [ { path: '/users', name: '
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く