Vue.js エラー「Component template should contain exactly one root element」の原因と対応方法
- 2019.12.19
- Vue.js
.vueコーディング時に、エラーメッセージ「Component template should contain exactly one root element」が出る原因と対処方法です。 環境 OS ubuntu19.10 node v12.13.0 npm 6.1 […]
Vue.js
Vue.js Vue-multiselectを利用してselectbox で複数選択を可能にする
- 2019.12.18
- Vue.js
VueのライブラリVue-multiselectをインストールしてselectboxで複数選択できるようするまでの簡単なサンプルコードです。 環境 OS CentOS 8.0.1905 (Core) node v12.13.1 npm 6.13.2 @vue/cli 4.1.1 […]
Vue.js エラーメッセージ「error: ‘hoge’ is assigned a value but never used (no-unused-vars) 」が発生した時の対処法
- 2019.12.16
- Vue.js
vue.jsのsrc/main.jsを触っていた時に発生。作成したオブジェクトを利用してないよというエラー内容。対処法を記載 環境 OS CentOS Linux release 7.7.1908 (Core) node v12.13.0 npm 6.12.1 @vue/cli& […]
Vue.js Render関数のサンプルコード
- 2019.12.14
- Vue.js
vue-cliを利用してプロジェクトを作成すると、main.jsに render: h=> h(App)と記述されており、 こちらのrenderの挙動を確認したかったので、確認用のサンプルコードを掲載。 環境 OS windows10 pro エディタ […]
Vue.js transition ラッパーコンポーネントのサンプルコード
- 2019.12.12
- transition, Vue.js, サンプルコード
transitionを利用してアニメーションを実現するサンプルコード 環境 OS Windos10 エディタ VScode Transitionクラスについて v-enter v-enter-active v-enter-to が表示に関連するクラス v- leave v- l […]
Vue.js Bootstrap-Vueを利用したプロジェクトの作成
- 2019.12.11
- Bootstrap-Vue, Vue.js
Bootstrap-Vueを利用してbootstrap4を簡単に利用できるプロジェクトの作成手順。 環境 OS ubuntu19.10 node v12.13.0 npm 6.12.1 @vue/cli 4.0.5 Vue CLI インストール 既に入れてい […]
Vue.js vue-routerの簡単なサンプルコード
- 2019.12.07
- vue-router, Vue.js
vue-routerでページ遷移を実現する簡単なサンプルコードです。 環境 OS ubuntu19.10 node v12.13.0 npm 6.12.1 ※ubuntu19.10にnodeのインストールはこちら プロジェクト作成 r-testという名前でプロジェクト […]
Nuxt.js axiosを使用してAPI接続しJSONデータを取得する
Nuxt.jsでaxiosを使ってAPIデータを取得する手順とサンプルコードです。デザイン部は vuetify を利用しています。 環境 OS ubuntu19.10 node v12.13.0 npm 6.12.1 Nuxt.js v2.10.2 Nuxt […]
Vue.js Vue.Draggableを利用してドラッグ＆ドロップを実装するサンプルコード
- 2019.12.03
- Vue.Draggable, Vue.js
ドラッグ＆ドロップをお手軽に実装できるvue.jsコンポートネントライブラリ「 Vue.Draggable( SortableJS のvue版 )」を利用したサンプルコードです。 環境 OS ubuntu19.10 node v12.13.0 npm 6.12.1 v […]
Vue.js クラスのバインディングのサンプルコード
vue.jsでhtmlのクラスを動的に変更するサンプルコードです 環境 OS Windos10 エディタ VScode 基本構文 active と記載された箇所がクラス名show と記載された箇所が true / false（ 真偽値 ）となります true であれば acti […]