Hapicode

# vuejs 開発時に遭遇したエラーリスト

# jquery のように vuejs を使う場合

npm yarn でインストールして vue-cli やフレームワークで稼働するのが一般的になった今、社内のホームページがまだドリームウエーバーで作られていることもあって、どっちかというと jQuery の方が多く利用されています。
だが、vuejs 使いたい気持ちは粘り強く jQuery から脱出して速く vuejs に乗り換えたい。

cli なしで vuejs 導入記録

head 部分に導入 正式名称ではインストール

<!-- 開発バージョン、便利なコンソールの警告が含まれています -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 本番バージョン、サイズと速度のために最適化されています -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

body のどこかに 正式名称では宣言的レンダーリング

<div id="app">
  {{ message }}
</div>

fotter に挿入

data の値を変更するとリアルに再度レンダーリングしてくれることの正式名称はリアクティブ

<script>
  var app = new Vue({
    el: "#app",
    data: {
      message: "Hello Vue!"
    }
  });
</script>

レンダーリング後結果表示

Hello Vue!

# Error compiling template エラー

[Vue warn]: Error compiling template

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

# Avoid using non-primitive value as key, use string/number value instead エラー

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead

v-for のkeyセットは文字と数字しか許可してません。配列やオブジェクトを key として入れるとこのエラー出ます。

エラー起こす NG 例

<div v-for="item in items" :key="item">
  {{item}}
</div>

問題なし OK 例

<div v-for="(item, index) in items" :key="index">
  {{item}}
</div>
2020-03-14
  • vuejs

関連記事

Nuxtjs 3 に Ant design Vue を使う

Ant-design-vue 4.x使うためのNuxt plugin 設定...

JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション

aos.js ライブラリ使ってHTML要素がスクロールと連動してアニメーションをします。...

bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
laravel に vuejs 使うための初期設定

PHPフレームワークlaravelにvuejs入れる時の初期設定まとめ、備忘録的...

vuejs back to top button component 作成

vue でトップに戻るボタンを作ることがよくありますが、ライブラリー使わずに実現してみました。...

Nuxtjs 動的なルーティング静的ページ自動生成

Nuxtjs 動的なルーティング使ってAPIとJSONで静的ページ一括生成してSEO対策...

vuejs v-if と v-show の違い

vuejs ifとshowの条件分岐について詳しく解説 よく使われる v-if と v-show の...

vuejs で omisejapan の決済フォーム作成した時のメモ

フロント開発 omisejapan カードペイメント vuejs でフォーム開発する時のメモ...

vuejs vuex が難しいわけではないけど覚えるのに時間かかる

vuejsの魅力であるvuexのいろいろメモしました。モジュール型のgettersの使い方とか引数の...

vuejs スクロールでナビバー表示非表示

vuejsで上にスクロールするとナビメニューが表示、下にスクロールすると非表示の切り替えをやってみま...

nuxtjs vue router params query ルートから取得できるもの

nuxtjs使うなら必ずvueルーターのパラメータやクエリーを取得したいときがくる。...

javascript reduce 連想配列の合計計算覚えよう

javascript 配列 sum 合計計算、reduce 使ってやってみて覚える連想配列の落とし穴...

値段をカンマと円マーク表示 vuejs money-format filter 自作

vuejsで円マークカンマ区切りのフィルター作りました。...

vuejs-datepicker 使ってカレンダー表示 日本語多言語対応

bootstrap-vue2.5 カレンダーコンポーネントがでるまでの辛抱でvuejs-datepi...

スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について

スクロールイベント監視、発火の時に使える便利ツールvue-perfect-scrollbarについて...

vue hook 使って vuejs コンポーネントライフサイクル監視

vuejsのhook使って開発を便利にしていこう...

Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ

電話番号チェック・メールアドレスチェック・文字チェック・郵便番号のチェックに使えるjavascrip...

javascript password generator ランダム文字列パスワード作成

javascriptで大文字・小文字・数字・記号対応のランダムパスワードつくることがありますが、vu...

nuxt cordova web ハイブリッドアプリ作成した時のメモ

vueのnuxtjsのSPAでハイブリッドアプリを作る、コールドバーという神使って...

chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
polyfill という宝物で開発時の ie11 対応した時のメモ