- 投稿日:2019-11-25T16:36:51+09:00
TypeError: Cannot read property '$createElement' of undefined
不要なところで、誤って
functional: true
を設定していました。// 誤 export default { functional: true, }vue.js// 正 export default { functional: false, // または削除 }他にも色々原因となり得るものは、あると思うのですが
自分は上記でハマりました。どこが原因かエラー文からはわかりにくかったので。
- 投稿日:2019-11-25T16:34:55+09:00
TypeError: Cannot read property '$createElement' of undefined
不要なところで、誤って
functional: true
を設定していました。// 誤 export default { functional: true, }vue.js// 正 export default { functional: false, // または削除 }他にも色々原因となり得るものは、あると思うのですが
自分は上記でハマりました、どこが原因か表示されないので。
- 投稿日:2019-11-25T16:17:35+09:00
QuasarFramework(Vue.js) + FirebaseUIでEmailとgoogleでの認証機能を実装する
前の記事
https://qiita.com/yassyskywalker/items/f247e0288803559aa5a1
概要
FirebaseUIを使って認証機能を実装します。前回までは、UIを表示させるまででしたが、今回は実際の認証機能まで実装します。といっても、Firebaseは、コンソールから設定できることが多いので、簡単なものだったら、びっくりするくらい早く実装できます!
環境
- MacOS Catalina 10.15.1
- node v10.16.0
- npm 6.11.3
Emailでの認証を設定する
メールアドレスのAccountChooserの設定を外します。
デフォルトだとおそらく以下のような画面が表示されてしまいます。
↑これをなくします。そのために、uiConfigのオプションで、
credentialHelper
を設定します。const uiConfig = { signInSuccessUrl: '/', signInOptions: [ firebase.auth.GoogleAuthProvider.PROVIDER_ID, firebase.auth.EmailAuthProvider.PROVIDER_ID ], credentialHelper: firebaseui.auth.CredentialHelper.NONE }コンソールからユーザーを登録しておきます。
あらかじめ、コンソールからユーザーを登録しておきます。
テストしてみます。
signInSuccessUrl
で設定したページに遷移すれば成功です!googleでの認証を設定する
コンソールからgoogleサインインを有効にします。
プロジェクトの公開名、プロジェクトのサポートメールを設定して保存します。
テストします。
↑こういう感じの画面で、google にログイン画面が出てきたらアカウントを選択してログインします。こちらはユーザーが無い場合は、自動で作成されます。
先程のEmail認証のときと同じ用に、
signInSuccessUrl
で設定したページに遷移すれば成功です!次回
次回は、より細かいユーザー設定を実装してみます・
- 投稿日:2019-11-25T13:28:27+09:00
Vueで背景をページ毎に動的に変えたい
やる事
「画像を投稿して、投稿した画像にコメントを付けたい」
「コメントページは別ページ」
「別ページの背景を投稿画像にしたい。」
できるだけ頭を使わずにVue.js/Nuxt.jsでやっていきましょう。方法
ページ内の要素をdivで包む
<template> <div> <!-- ここに中身。カニ味噌とか --> </div> </template>div要素のスタイルをバインド
バインド自体はsrcなどの属性に対して行うのとまったく同じ。
<template> <div v-bind:style="pageStyle"> <!-- ここに中身。ウニとか --> </div> </template>スクリプトで背景要素を設定する。
連想配列にスタイルを書いていく。CSSのプロパティは通常ケバブケースだが、ここではキャメルケースで書くこと。
あと"url('ebikaniuni')"の中にURLを入れる部分に注意。落ち着いて書きましょう。
ちなみにTemplate部に直で書いてもOKだったりする。とても読みにくくなるけど...。<script> export default { data() { return { pageStyle: { // 背景変更用スタイル backgroundImage: "", // 背景読み込み前なので空白 backgroundRepeat: "no-repeat", backgroundAttachment: "fixed", backgroundPosition: "center center", } }; }, created() { this.pageStyle.backgroundImage = "url('" + gazouNoUrl + "')"; // クォートをいい感じにエスケープする必要がある点に注意。 }, } </script>もっといい方法があったら教えてクレメンス
参考資料