Vue で Uncaught RangeError: Maximum call stack size exceeded - おろログ
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(自分自身) を呼び出さなければ解決。
Fluxに学ぶVuex - Qiita
最初に この記事は自分なりにVuexを噛み砕こうと初心者がまとめたものです。 この解釈違うだろ等あるかもしれませんので、そのときはご指摘いただけると嬉しいです！ なお、今回はソースについては触れず、概念についての解釈をまとめています。 この記事を書くことになった背景 現場でまずVue.jsの新規開発、続いてknockout.jsの(以下ko.js)保守開発に関わる機会がありました。 どっちにも触れた上での最初の感想、「えっko.js分かりにくいがすぎる！データの流れがよ、よめない。」という感じでした(笑) ko.jsは一瞬流行ったフレームワークだそうで・・・不人気！？ それがまた大規模で複雑なシステムだったので、余計でした。 Vuexの状態管理の恩恵を実感することができました。 実感しているうちに、自分で調べたことを含め、まとめておこうと思います。 目次 １.Fluxについて（概念） ２.
Vuexを利用せずに親子関係を持たないコンポーネント同士で通信する - 俺、サービス売って家買うんだ
しばらくぶりにWebのフロントエンドを書いてるので色々復習を込めて。 ReactやVueなどコンポーネント指向で実装できるフレームワークを利用して開発する際に親子関係を持たないコンポーネント同士で通信をしたい時ってありますよね。 とりわけシングルページアプリケーションを作っている際に自分がよく出会うケースとして 共通ヘッダーのタイトルを書き換える ページによって共通ヘッダーに「戻る」ナビゲーションを出したり消したりする バックグラウンドで通信し続けているソケットからデータを受信して画面上にNotificationのバッヂやポップアップを出す とかがあります。 こういう時にこそアプリケーション全体で一つのstoreを共有してstateを管理する方針のfluxパターンを実現するVuexやReduxを導入したくなります。 ただただ、概念を理解したり動くようになるまでに準備が結構必要だったりと、ち
NativeScript-Vue - A NativeScript plugin for building truly native applications using Vue.js
elements:utilitiesv-templatev-viewintroductionはじめにgetting-startedクイックスタートPlaygroundのチュートリアルインストール更新のガイドVue DevToolsの使用NativeScriptのプラグインを使うVueのプラグインを使うroutingutilitieselements:layoutsAbsoluteLayoutDockLayoutFlexboxLayoutGridLayoutStackLayoutWrapLayoutelements:action-barActionBarActionItemNavigationButtonelements:componentsActivityIndicatorButtonDatePickerFrameHtmlViewImageLabelListPickerListViewPa
API リファレンス | Vue Router
# API リファレンス # <router-link> <router-link> はルーターが使用可能になっているアプリケーションでユーザーのナビゲーションを有効にするためのコンポーネントです。対象とする location は to プロパティを使って指定します。デフォルトでは正しい href と共に <a> タグとして描画しますが、 tag プロパティを設定することも可能です。さらに、対象のルートがアクティブの時に、そのリンクは自動的にアクティブな CSS クラスが当てられます。 下記の理由により <router-link> はハードコードする <a href="..."> よりも好ましいです。 HTML5 history モードでも hash モードでも同じ方法で動作します。もしあなたがモードを切り替えたりする場合や、IE9 で hash モードにフォールバックする場合に、何も変更
VuetifyでSelectタグを使う時の注意点 | Takumon Blog
なにこれ 最近Vue.jsのマテリアルデザインのUIフレームワーク「Vuetify」を使っています。 とても便利で、管理アプリのようにデザインにこだわる必要がなければ、CSSをほとんど書かずに済むくらいコンポーネントが充実しています。 ただSelectタグでlabelとvalueを出しわける際に初期値を設定する場合は少しだけ注意点があるので、この記事ではそちらを紹介します。 return-objectを使いましょう Selectタグでlabelとvalueを出しわけるときに初期値を設定する場合、v-modelで設定します。 以下のような実装です。 <template> <div> {{ selectedPlan }} <v-select v-model="selectedPlan" item-text="label" item-value="value" :items="plans" la
vue.jsコンポーネントの基礎 | アールエフェクト
Vue.jsでのコンポーネントはVue.jsの中核をなす重要な機能です。コンポーネント間のデータの受け渡しや記述方法など最初は難しさを感じるかと思います。ぜひ本文書を参考にコンポーネントの理解を深めてください。 本文書はVueのバージョン2でCDNを利用して動作確認を行っています。Vue 2はEOL(End of Life)になっているので新たに学習を開始する人はVue3で始めることになります。Vue 3のComposition APIのsetup scriptを利用した場合の記事を別で公開しているので参考にしてください。バージョンがアップして記述方法が変わってもコンポーネントの基本的な箇所は変わっていないためVue2の知識はVue3で活用することができます。
TypeScript で型定義ファイル( d.ts )がないときの対処法 - Qiita
Could not find a declaration file for module 'foobar'. Try npm install @types/foobar if it exists or add a new declaration (.d.ts) file containing declare module 'foobar'; とコンパイルエラーが発生します。 大まかに分けると3対処法があります。 @types からインストールする 型定義ファイル( d.ts )を自作する require でモジュール読み込み 1. @types からインストールする 型定義ファイルが提供されているか試します。 TypeScript コンパイラの指示通り @types からのインストールを試します。 無事インストール出来たら解決です。 もし型定義が提供されておらず、 error An une
vue.js - Vue-i18n単一ファイルコンポーネントが機能しない - 初心者向けチュートリアル
sfcメソッドを使用してプロジェクトにv-i18nを実装しようとしています。私はそれを機能させることができませんでした。私のプロジェクトと混同しないように、公式のv-i18n sfcの例に10〜15行のコードを追加して修正しただけです。 これは私の質問を非常に単純に示しています。 githubでこの非常に小さな質問プロジェクトをチェックしたい人のために https://github.com/berkansivri/V-i18n-Question Component1.vue <template> <p>{{$t('lang')}}</p> </template> <i18n> { "en":{ "lang" : "English" }, "es":{ "lang": "Espanol" } } </i18n> App.vue <template> <div id="app"> <label
Nuxt.jsとVue I18nで多言語サイトをつくろう | フロントエンドBlog | ミツエーリンクス
Nuxt.jsはVue.jsアプリケーションを構築するためのフレームワークで、シングルページアプリケーションとして構築するか、サーバサイドレンダリングを利用するか、静的サイトとしてファイルを生成するかを設定することができます。静的ファイルを生成する場合、ページごとにvueファイルを用意し、ビルドしてHTMLファイルを生成するのが基本ですが、ルーティング機能をうまく使うことで1つのvueファイルから複数のHTMLを作成することもできます。 Vue I18nはVue.js用に最適化されて作られた国際化対応用のライブラリです。今回はこの2つのライブラリを使い、多言語サイトの静的サイトジェネレータとしてNuxt.jsの開発環境を整えてみます。 前提 今回作成するサイトは下記のようにホスティングすることを想定して作ります。 https://example.co.jp/ja/（日本語） https:/
vue-i18n を使ってみました | senmyou's blog
vue-i18n は Vue.js 向けの国際化（多言語化）プラグインです。 今回アプリのアップデート版を作るにあたり、Monaca の Onsen UI + Vue プロジェクトで vue-i18n を使ってみました。 以下に備忘録を兼ねた使用例を記します。 インストール npm install vue-i18n ファイル構成 対応する言語は日本語、英語、韓国語、中国語（簡体）、中国語（繁体）、スペイン語です。それぞれ JSON ファイルに分けて記述します。i18n.js では vue-i18n のインスタンスを作成します。main.js では Vue 本体のインスタンスを作成しています。そこに i18n.js で作成した vue-i18n のインスタンスを追加します。 { "cancel": "キャンセル", "set": "設定", "del": "削除", "sound": { "
HTML5 - テクニカルノート一覧
スクリプティング | CSS3 | Sass | jQuery | Angular v6 v5 | React | Vue.js Vue CLI Vuex | D3 | three.js | RxJS 6 v5.5 | TypeScript | トラブルシューティング | リファレンス | 数学 | スクリプティング FN1202002 <canvas>要素で定めた領域に図形を描く FN1202005 EaselJSで図形を描く FN1203001 EaselJSで描いた星形を回す FN1203005 EaselJSのマウスクリックとドラッグ&ドロップ FN1203006 JavaScriptでオブジェクトに設定した関数のスコープ FN1204005 EaselJSで外部ビットマップファイルを読込んで回す FN1205001 EaselJSでインスタンスをクリックした座標で回しながらドラッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vuejs-templates
Vue I18n
Vue.js News - Revue
Vue.js jobs – Browse through dozens of Vue.js openings
How to drastically reduce your bundle size and load time in Vue.js
Vue-Multiselect | Vue Select Library.
Vue Select | VueJS Select2/Chosen Component
VueToolbox
