20220115のvue.jsに関する記事は5件です。

投稿日：2022-01-15T16:57:04+09:00

サイトのキャプチャや自動OGP画像生成、動的サイトのHTML取得のSaas「WebNium」を公開

出来ること WebページキャプチャAPI 動的HTML取得API OGP画像自動生成 Saasのページは下記作ろうと思ったきっかけ画像キャプチャや動的サイト(javascriptが動いてHTMLが生成されるサイトSPA等)のHTMLを取得したいということがよくあり、しかし、そのためにseleniumを実行したりするのがめんどくさいなーってことで、簡単に扱えるWebApiをと思った SPAで動的OGPを実装したかった（後に、metaタグを切り替えられないからOGP生成が動的であっても、ページごとにOGPを設定することは不可能だと分かる）技術スタックフロントエンド typescript Vue.js Firebase Hosting バックエンド python Heroku データベース Firebase RealtimeDatabase 認証 Firebase Authentication OGP画像自動生成前述の通り本当はSPAで、各ページの画像を切り替えたかったが、出来なかったとはいえ、OGPの画像を用意するのがダルいという場合はこれを使うとよいのかもただ、認証とキャッシュが未実装なのがβであるというところ・・・。

　 Tweet
Qiitaで続きを読む

投稿日：2022-01-15T15:32:51+09:00

'el' is defined but never used no-unused-vars...の解決方法。

Vue.jsでVue CLIを使った環境で学習していて、 npm run serveでサーバー立ち上げた際に問題が起こりました。 kushiyama_makoto@MakotonoMacBook-Air udemy-vuejs4 % npm run serve > udemy-vuejs4@0.1.0 serve > vue-cli-service serve INFO Starting development server... 98% after emitting CopyPlugin ERROR Failed to compile with 1 error 14:40:38 error in ./src/App.vue Module Error (from ./node_modules/eslint-loader/index.js): /Users/kushiyama_makoto/udemy-vuejs4/src/App.vue 75:19 error 'el' is defined but never used no-unused-vars 89:18 error 'el' is defined but never used no-unused-vars 92:22 error 'el' is defined but never used no-unused-vars 95:19 error 'el' is defined but never used no-unused-vars 109:18 error 'el' is defined but never used no-unused-vars 112:22 error 'el' is defined but never used no-unused-vars 119:1 error Irregular whitespace not allowed no-irregular-whitespace ✖ 7 problems (7 errors, 0 warnings) @ ./src/main.js 6:0-28 10:13-16 @ multi (webpack)-dev-server/client?http://192.168.11.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js 「elが定義されてるけど、一度も使用されてない？？？」ちょっとよくわからないので、しばらくググってましたが時間だけが過ぎました。（土日だけ勉強に当ててるので、１週間くらいかかりました。意味わからんくて寝込みました。）ただある日、記事にたどり着いいたので紹介します。こちらです。 https://qiita.com/Nelson605/items/8b1a4cefef7a84a0dec0 こちらに記述されている部分のどこかのファイルに記述するのかな（おそらくjsonファイルかな）。。。さらにこちらのstackOverFlowの記事にさらに細かくありました！！ https://stackoverflow.com/questions/61874994/vue-disable-no-unused-vars-error-the-simplest-fix やはりpakage.jsonに追記するみたいです。実際に追加しました。動いた！！！因みに、このような記事もありました。 https://qiita.com/blajir/items/82127aaa57e4d73a8389 原因は、 JavaScriptの構文チェックツールが動いたからですかね。なので、今回の対応はチェックツールのno-unused-varsを無効することによってエラーを解消したようです。

　 Tweet
Qiitaで続きを読む

投稿日：2022-01-15T15:32:51+09:00

'el' is defined but never used no-unused-vars...のエラー解決方法。

Vue.jsでVue CLIを使った環境で学習していて、 npm run serveでサーバー立ち上げた際に問題が起こりました。 kushiyama_makoto@MakotonoMacBook-Air udemy-vuejs4 % npm run serve > udemy-vuejs4@0.1.0 serve > vue-cli-service serve INFO Starting development server... 98% after emitting CopyPlugin ERROR Failed to compile with 1 error 14:40:38 error in ./src/App.vue Module Error (from ./node_modules/eslint-loader/index.js): /Users/kushiyama_makoto/udemy-vuejs4/src/App.vue 75:19 error 'el' is defined but never used no-unused-vars 89:18 error 'el' is defined but never used no-unused-vars 92:22 error 'el' is defined but never used no-unused-vars 95:19 error 'el' is defined but never used no-unused-vars 109:18 error 'el' is defined but never used no-unused-vars 112:22 error 'el' is defined but never used no-unused-vars 119:1 error Irregular whitespace not allowed no-irregular-whitespace ✖ 7 problems (7 errors, 0 warnings) @ ./src/main.js 6:0-28 10:13-16 @ multi (webpack)-dev-server/client?http://192.168.11.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js 「elが定義されてるけど、一度も使用されてない？？？」ちょっとよくわからないので、しばらくググってましたが時間だけが過ぎました。（土日だけ勉強に当ててるので、１週間くらいかかりました。意味わからんくて寝込みました。）ただある日、記事にたどり着いいたので紹介します。こちらです。 https://qiita.com/Nelson605/items/8b1a4cefef7a84a0dec0 こちらに記述されている部分のどこかのファイルに記述するのかな（おそらくjsonファイルかな）。。。さらにこちらのstackOverFlowの記事にさらに細かくありました！！ https://stackoverflow.com/questions/61874994/vue-disable-no-unused-vars-error-the-simplest-fix やはりpakage.jsonに追記するみたいです。実際に追加しました。動いた！！！因みに、このような記事もありました。 https://qiita.com/blajir/items/82127aaa57e4d73a8389 原因は、 JavaScriptの構文チェックツールが動いたからですかね。なので、今回の対応はチェックツールのno-unused-varsを無効することによってエラーを解消したようです。 ※追記普通にpackage.jsonにrulesの項目あるのでここ（下記のスクショ）に追加でよかったみたいです。。。。

　 Tweet
Qiitaで続きを読む

投稿日：2022-01-15T10:17:23+09:00

Vue.jsの仕組み

概要ここではVue.jsの基本的な使い方について記載します。基本コード以下のコードを例に挙げて説明していきます。 <!DOCTYPE html> <html> <head> <title>My First Vue App</title> <script src="https://unpkg.com/vue"></script> 　 ----- ① </head> <body> <h1>Vue.js</h1> <div id="app"> {{ text }} ----- ② </div> <script> ----- ③ var app = new Vue({ el: '#app', data: { text: 'Vue Test' } }) </script> </body> </html> Vue.jsに関係している部分はコードの①,②,③の部分になります。 ①ではVue.jsを読み込んでいます。 ②で変数に入れられた文字列の表示を行います。 ③ではVueオブジェクトの定義をしています。 el:というプロパティでVueオブジェクトの対象となるものを指定します。まとめ Vue.jsはhtmlに埋め込むことで非同期処理を実現できます。今回はhtmlファイルに書き込むような形でしたが、複雑な処理の場合はjs用にファイルを切り分けて実装しても良いと思います。

　 Tweet
Qiitaで続きを読む

投稿日：2022-01-15T10:02:49+09:00

v-dialogで特定のボタンが押された時にダイアログを閉じたい

目的 vuetifyで簡単なフロントを実装していて、その中でフォームをダイアログ形式で実装しようとしたが、ダイアログをどのようにして消せば良いのか分からなくなってしまった。概要 1. あらかじめshowDialogなどのデータをnullでスクリプトに定義 2. ボタンにv-on:click(@click)を実装し、クリックされたときに1のshowDialogをfalseに変更 3. v-dialogのv-modelをshowDialogにすることでshowDialogがfalseの場合に自動的にダイアログが閉じる具体例具体的には下記のコードのように実装すると良い。詳細はコメントに記載している <template>  　　　　 <v-dialog v-model="showDialog" persistent max-width="600px" > <template v-slot:activator="{ on, attrs }"> 　　　　　　　　　　　　 <v-btn depressed outlined elevation="2" class="pink--text mb-5 px-10 ml-10" dark v-bind="attrs" v-on="on" > メンバー登録 </v-btn> </template> <v-card> 　　　　　　　　　　　　 <v-card-title> <span class="text-h5 pink--text">メンバー登録</span> </v-card-title> 　　　　　　　　　　　　 <v-card-text> <v-text-field label="名前" required v-model="postUsername" ></v-text-field> 　　　　　　　　　　　　　　　　 <v-select label="性別" required v-model="postGender" :items="['M', 'W']" ></v-select> </v-card-text> <v-card-actions> <v-spacer></v-spacer> 　　　　　　　　　　　　　　　　 <v-btn class="pink--text" text @click="showDialog = false" > Close </v-btn> 　　　　　　　　　　　　　　　　 <v-btn class="pink--text" text @click="showDialig = false; postInfo()" > Save </v-btn> </v-card-actions> </v-card> </v-dialog> </template> <script> export default { data() { return { postUsername:'', postGender:'', // 初めはnullだが、closeかsaveボタンがクリックされるとfalseとなり、ダイアログが閉じる showDialog: null }; }, methods: { // メンバー情報をバックエンドに送信 postInfo: function () { }, }, }; </script> メンバー登録ボタンを押すと、、、ダイアログが開き、closeかsaveを押すとダイアログが消える。参考文献 vuetify公式

　 Tweet
Qiitaで続きを読む