Boards

Vue.jsの質問をしたり答えたりする掲示板

だら@Crieit開発者

2019-01-29に作成

Vue.jsに関する質問を何でもしていい掲示板です。匿名での投稿も可能です。どんなことでもどしどし書き込んでください。回答もどなたでも自由にできます。僕も回答できる内容であれば必ず回答します！

質問は下記に沿って書いていただくと回答しやすくなります。

実際のソースコードがある場合、可能な範囲で書いていただくと問題点を見つけやすくなります。
実際に発生したエラーメッセージがある場合、コピペしていただくと問題解決につながる可能性が高いです。
見た目上の問題の場合、スクリーンショットを貼ると状況が把握しやすくなります。

ボードとは？

(匿名) #9640a0ed

2023-12-19に投稿

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】
としてエラーになってしまいます。

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

(匿名) #ee341e2c

2021-03-19に投稿

Vue.jsの$emitについて

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

  <my-input step="1"></my-input>

Vue.js


Vue.component('my-input', {
  props:["step"],
  template:`<button type="button" @click="onclick">{{ step }} </button>
`,
methods: {
  onclick:function() {
    this.$emit('plus', Number(his.step));
  }
}
});

Dr. Takeyuki Ueda

2019-04-26に更新

props CJS ESM module.exports export

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

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

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