https://pop-web.github.io/categories/vue-js/ Recent content in Vue-Js on POPWEB Hugo ja Wed, 28 Oct 2020 00:00:00 +0000 https://pop-web.github.io/programming/vue-js/nuxt-js-typeerror-cannot-set-property-render-of-undefined/ Wed, 28 Oct 2020 00:00:00 +0000 https://pop-web.github.io/programming/vue-js/nuxt-js-typeerror-cannot-set-property-render-of-undefined/ <h2 id="エラー内容">エラー内容</h2> <p>Nuxt.jsで開発中、以下のコンソールエラーが出て画面が表示されなくなった。</p> <pre tabindex="0"><code>TypeError: Cannot set property &#39;render&#39; of undefined </code></pre><h2 id="原因と対処法">原因と対処法</h2> <p><strong><script>タグの閉じタグがなかったり、空の<script>タグが存在</strong>しているとエラーとなるため、ちゃんと閉じタグをしてあげるか、空タグを削除してあげるとよい。</p> https://pop-web.github.io/programming/vue-js/nuxt-firebase-core-js/ Wed, 29 Jul 2020 00:00:00 +0000 https://pop-web.github.io/programming/vue-js/nuxt-firebase-core-js/ <p>Nuxt + Firebaseで開発をしていて、Firebaseのテストモジュール入れ、開発サーバを起動したらcore.js関連のエラーがずらっと出た。</p> https://pop-web.github.io/programming/vue-js/v-slot/ Fri, 19 Jun 2020 00:00:00 +0000 https://pop-web.github.io/programming/vue-js/v-slot/ <p>Vue.jsのスロットの使い方をざっくり説明する。</p> <p>開発には<a href="https://blog.pop-web.net/programming/vue-js/vue-cli-install/">Vue CLI</a>を使っている前提で話を進めていく。</p> <h2 id="スロットコンテンツ">スロットコンテンツ</h2> <p>スロットコンテンツでは、親コンポーネントから子コンポーネントへコンテンツを丸ごと渡しあげることができる。</p> https://pop-web.github.io/programming/vue-js/nexttick/ Mon, 15 Jun 2020 00:00:00 +0000 https://pop-web.github.io/programming/vue-js/nexttick/ <p>mountedやupdatedを使用してもでは子コンポーネントを全てを<strong>マウントしたことは保証しない</strong>ため、子コンポーネントへアクセスがうまくいかない時がある。</p> https://pop-web.github.io/programming/vue-js/gyp-no-xcode-or-clt-version-detected/ Wed, 10 Jun 2020 00:00:00 +0000 https://pop-web.github.io/programming/vue-js/gyp-no-xcode-or-clt-version-detected/ <p><code>vue create &lt;プロジェクト名&gt;</code>コマンドを入力すると以下のようなエラーがでた。</p> <pre tabindex="0"><code>gyp: No Xcode or CLT version detected! </code></pre><p>XcodeあるいはCLTのバージョンがおかしいらしい。</p> https://pop-web.github.io/programming/vue-js/vue-cli-install/ Mon, 08 Jun 2020 00:00:00 +0000 https://pop-web.github.io/programming/vue-js/vue-cli-install/ <p>いつもはVue.jsのフレームワークであるNuxt.jsで開発を行なっているが、Vue CLIでの開発環境の構築をしてみる。</p> <p>事前にNode.jsをインストールしておく。</p> https://pop-web.github.io/programming/vue-js/nuxt-js-unknown-custom-element/ Wed, 03 Jun 2020 00:00:00 +0000 https://pop-web.github.io/programming/vue-js/nuxt-js-unknown-custom-element/ <p>Nuxt.jsで開発中に以下のエラーが出てハマった。</p> <pre tabindex="0"><code>[Vue warn]: Unknown custom element: &lt;コンポーネント名&gt; - did you register the component correctly? For recursive components, make sure to provide the &#34;name&#34; option. </code></pre><p>エラーメッセージにあるように、nameオプションで指定してもダメだった。</p> https://pop-web.github.io/programming/vue-js/dynamic-component/ Mon, 01 Jun 2020 00:00:00 +0000 https://pop-web.github.io/programming/vue-js/dynamic-component/ <p>動的なコンポーネントについて説明する。</p> <p>開発環境はは<a href="https://blog.pop-web.net/programming/vue-js/vue-cli-install/">Vue CLI</a>を使っている前提で話を進めていく。</p> <h2 id="動的なコンポーネントの記述方法">動的なコンポーネントの記述方法</h2> <p>動的にコンポーネントを切り替えるために、複数コンポーネントを用意しておく。</p> https://pop-web.github.io/programming/vue-js/nuxt-js-vuex/ Thu, 07 May 2020 00:00:00 +0000 https://pop-web.github.io/programming/vue-js/nuxt-js-vuex/ <p>Nuxt.jsで状態管理を行うライブラリであるVuexのクラシックモードとモジュールモードについて説明。</p> <h2 id="まず新規nuxtプロジェクトを作成">まず、新規Nuxtプロジェクトを作成</h2> <p>以下、コマンドでテスト用にNuxtプロジェクトを作成しておく。</p> https://pop-web.github.io/programming/vue-js/custom-components-v-model/ Sun, 12 Apr 2020 00:00:00 +0000 https://pop-web.github.io/programming/vue-js/custom-components-v-model/ <p>v-modelは双方向データバインディングを行うディレクティブであるが、カスタムコンポーネントでv-modelを使う場合、少しややこしい。</p> <h2 id="v-modelの中身の動作について">v-modelの中身の動作について</h2> <p>まず、v-modelには、別の書き方がある。</p> https://pop-web.github.io/programming/vue-js/v-for-key/ Tue, 07 Apr 2020 00:00:00 +0000 https://pop-web.github.io/programming/vue-js/v-for-key/ <h2 id="v-forディレクティブにはkey属性が必須">v-forディレクティブにはkey属性が必須</h2> <p>v-forディレクティブを使う場合、<strong>v-bindディレクティブへ一意（ユニーク）のkey属性を設定すること必須である。</strong></p> <p>key属性がない場合はどう言ったバグが起こるのか簡単に説明する。</p> https://pop-web.github.io/programming/vue-js/%E3%80%90vue%E3%80%91computed%E3%81%A8methods%E3%81%AE%E9%81%95%E3%81%84%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/ Mon, 06 Apr 2020 00:00:00 +0000 https://pop-web.github.io/programming/vue-js/%E3%80%90vue%E3%80%91computed%E3%81%A8methods%E3%81%AE%E9%81%95%E3%81%84%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/ <h2 id="computedがmethodsとは異なる点">computedがmethodsとは異なる点</h2> <p>computedがmethodsとは異なる点は、<strong>computedの方は依存関係に基づいてキャッシュされるという性質を持っているということ。</strong></p> https://pop-web.github.io/programming/vue-js/vue-nuxt-commit-eslint/ Sun, 05 Apr 2020 00:00:00 +0000 https://pop-web.github.io/programming/vue-js/vue-nuxt-commit-eslint/ <p>Gitでコミットする際にESLintを走らせて、エラーの場合はコミットさせないようにする。</p> <h2 id="手順">手順</h2> <p>手順的には以下のよう。</p> <ul> <li>コミットされる前の操作である「pre-commit」を<code>husky</code>で制御する。</li> <li><code>lint-staged</code>でGitのステージングエリアにあるファイルを対象にESLintのコマンドを実行する。</li> <li>Gitコミット時に、ESLintでチェックしてエラーが出ればコミットされない。</li> </ul> <h2 id="必要なモジュール">必要なモジュール</h2> <p>必要なnpmモジュールをインストールする。</p> https://pop-web.github.io/programming/vue-js/vue-js-reactivity/ Sat, 04 Apr 2020 00:00:00 +0000 https://pop-web.github.io/programming/vue-js/vue-js-reactivity/ <p>VueのリアクティブシステムとはJavaScriptオブジェクトとの状態を監視し変更されたら検知するシステム。</p> <p><strong>Vueのコンポーネント内で状態を保持している値が変更された場合、リアルタイムでHTML側へその変更が検知されHTMLが更新される。</strong></p> https://pop-web.github.io/programming/vue-js/nuxt-js-ssr-docker-compose-deploy/ Fri, 03 Apr 2020 00:00:00 +0000 https://pop-web.github.io/programming/vue-js/nuxt-js-ssr-docker-compose-deploy/ <p>Nuxtプロジェクト（SSRモード）をDocker Composeを使って起動させる方法を説明する。</p> <p>今回は、Nuxtプロジェクト直下に<code>Dockerfile</code>と<code>docker-compose.yml</code>を置く。</p> https://pop-web.github.io/programming/vue-js/vue-youtube-data-api/ Thu, 29 Aug 2019 00:00:00 +0000 https://pop-web.github.io/programming/vue-js/vue-youtube-data-api/ <p>YouTubeで検索ワードの結果を取得して、Vue.jsで自分のサイトに表示させる方法を説明する。</p> <p>今回は、**「猫　集会」**というキーワード行う。</p> https://pop-web.github.io/programming/vue-js/vue-basic/ Tue, 27 Aug 2019 00:00:00 +0000 https://pop-web.github.io/programming/vue-js/vue-basic/ <p>Vue.jsの基本機能をまとめて説明。</p> <h1 id="dataオプション">dataオプション</h1> <p>dataオプションは、その名の通りデータを扱うオプション。</p> <p>定義したデータは、テンプレート側（HTML）でマスタッシュ構文で展開することができる。</p> https://pop-web.github.io/programming/vue-js/vue-component-global-local/ Sat, 24 Aug 2019 00:00:00 +0000 https://pop-web.github.io/programming/vue-js/vue-component-global-local/ <p>Vue.jsでコンポーネントを定義する際に、グローバル登録とローカル登録の２パターンある。</p> <p>それぞれ説明する。</p> <h2 id="グローバル登録">グローバル登録</h2> <p>グローバル登録するには、「Vue.componet」を使う。</p>