「Vue.jsの質問をしたり答えたりする掲示板」の投稿 - Crieit

Vueについて学び始めたばかりの初心者です。FireBaseとの連携について学んでいるところな...

2023-12-19T10:39:17+09:00

Vueについて学び始めたばかりの初心者です。
FireBaseとの連携について学んでいるところなのですが、教材の通りに進めるとエラーが出てしまうので、よろしければご教授下さい

srcフォルダにfirbase/firebase.js　というフォルダとファイルを作成

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import 'firebase/auth';
import "firebase/storage";

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: ""
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize Cloud Firestore and get a reference to the service
const db = getFirestore(app);

export default db;

これを掲示板の画面を作成しているChatBorad.vueにて、

script>
import firebase from "../firebase/firebase.js"

export default {
created(){
const chatRef = firebase.firestore().collection('ChatData')
console.log(chatRef)
},
(以下略)

として画面遷移時に読み込みを行いたいのですが、実行すると
【_firebase_firebase_js__WEBPACK_IMPORTED_MODULE_0__.default.firestore is not a function】
としてエラーになってしまいます。

お分かりになる方、よろしければご教授お願い致します。

・$emitの前についているthisは何を表しているのでしょうか？

2021-03-19T21:46:37+09:00

・$emitの前についているthisは何を表しているのでしょうか？

Vue.js


Vue.component('my-input', {
  props:["step"],
  template:`
`,
methods: {
  onclick:function() {
    this.$emit('plus', Number(his.step));
  }
}
});

すみません、一人で考えてたら煮詰まってしまって...単に自分の混乱を吐露するようなご質問ですの...

2019-04-26T15:09:17+09:00

すみません、一人で考えてたら煮詰まってしまって...
単に自分の混乱を吐露するようなご質問ですので、基本的に無視していただいても仕方ないと思うのですが、もし本件に一家言お持ちの方がいらっしゃいましたらご意見をお聞かせいただければ本当にありがたいです

Vue で View のコンポーネントを作る時、かつコンポーネントが外部の大きな定義ファイルを（たとえば 809種類のポケモンデータの json とか）元に表示をするとき、以下のどちらが技術的にみて適切なのでしょうか

module.exports は read only なので、インポートしたした pokemon 情報を含めない、だから export に変更すべき
vue-cli が「これがベスト・プラクティスだ」って言ってコンポーネントを module.exports にしてるんだから、なんか理由はわからないけどテンプレートで import なんかすべきじゃない（教条主義的ではありますが）。router.js あたりでインポートして props として渡すべき

（ちなみに、下記ではそうしてた処理をコメントアウトしてやめちゃってますし、props で渡してた内容もすでに消しちゃってますが参考まで）

３日考えてもなにも思いつかず闇の中にいるような気分です
ググってもあまりピッタリな話はでてこないし、
なんでもいいのでどなたかなにかご意見をおきかせいただければ大変ありがたい次第です