# 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-forkeyセットは文字と数字しか許可してません。配列やオブジェクトを 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 を使う
JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
vuejs back to top button component 作成
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成
vuejs v-if と v-show の違い
vuejs で omisejapan の決済フォーム作成した時のメモ
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
vuejs スクロールでナビバー表示非表示
nuxtjs vue router params query ルートから取得できるもの
javascript reduce 連想配列の合計計算覚えよう
値段をカンマと円マーク表示 vuejs money-format filter 自作
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
vue hook 使って vuejs コンポーネントライフサイクル監視
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
javascript password generator ランダム文字列パスワード作成
nuxt cordova web ハイブリッドアプリ作成した時のメモ
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
laravel に vuejs 使うための初期設定
polyfill という宝物で開発時の ie11 対応した時のメモ