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(自分自身) を呼び出さなければ解決。
現象 mapがない!!😇 概要 Nuxt.jsで色々ごちゃごちゃやってたときにググっても解決方法が出てこず詰まってしまった。 やりたいことは意外と単純で、mapメソッドを使いたかっただけなのだが思いの外しんどかったのでメモ 筆者が取得しようとしたArrayがObserverになってしまっていたケース export default { language: { javaScript: { name: 'JavaScript', framework: ['Vue.js', 'Nuxt.js', 'React.js', 'AngularJS', 'jQuery'] } } }
はじめに 帰ってくる配列の値が{__ob__: observer}になってundefinedになった方が対象です。 Vue.jsを勉強し始めて、一ヶ月ほどなので正しい方法だと保証はできませんですが、動かすための一つの方法として見守ってほしいです。 環境 ・node 12.7.0 ・vue-cli 4.3.1 ソースコード import firebase from 'firebase/app'; import'firebase/database' import Vue from 'vue'; created(){ this.database = firebase.database(); this.todosRef = this.database.ref('todos'); var that = this; this.todosRef.on('child_added', function(sn
[Vue.js] なぜpropsのdefault値にObjectやArrayを指定する際にfactory関数にする必要があるのかJavaScriptVue.js
エラーについて [Vue warn]:Property or method "name" is not defined on the instance but referenced during render.errorVue.js [Vue warn]: Property or method "name" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declar
はじめに Laravel+Vue.jsでSPAを作るときのCSRFトークンの扱いについてつまずいたので設定方法や原因を私なりにまとめました。 もっと良い方法がある、この方法だとこれがだめ、といったことがありましたら指摘いただければ幸いです。 環境&前提 Laravel 5.8 認証機能はLaravel標準を使用 Vue.js 2.6.10 axiosでAPIを叩いてPOST 設定方法 結論から言うと、今回の私の環境や前提では特に何もしなくてよいでした。 前提通りなら特に設定は不要で、axiosがCookieからCSRFトークン(を暗号化したもののようです)を取得して送信してくれます。 日本語のドキュメントにも書いてありますね… https://readouble.com/laravel/5.8/ja/csrf.html#csrf-x-xsrf-token いくつかのJavaScriptフレ
VuetifyのDatepicker、すごく便利なんだけど、v-text-fieldと一緒に使った時によく使うclearableで値が消えないなーと思っていたメモ。 何したのか v-text-fieldに@click:clear="date = null"を追加した。 コードは公式サンプルを利用 https://vuetifyjs.com/en/components/date-pickers#date-pickers-formatting-date-using-external-libs <template> <v-menu v-model="menu1" :close-on-content-click="false" full-width max-width="290" > <template v-slot:activator="{ on }"> <v-text-field :value
子コンポーネントでdataオプションを(うっかり)定義したところ、 [Vue warn]: The “data” option should be a function that returns a per-instance value in component definitions. で怒られました。 Vueのdataプロパティやelプロパティは、全インスタンス間でまたいで同じものが使用されるとことなので、子コンポーネント側のdataプロパティはオブジェクトとしてでなく関数として定義する必要があります。 Vue.component('child-component', { template:"<some>code</some>", data: function() { return { language: ['English', 'Japaese'] } } })
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く