#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.

vuejs(opens new window)

#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

関連記事

polyfill という宝物で開発時の ie11 対応した時のメモ
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
値段をカンマと円マーク表示 vuejs money-format filter 自作
vue hook 使って vuejs コンポーネントライフサイクル監視
vuejs i18n の html-lang と font 設定
vuejs スクロールでナビバー表示非表示
nuxtjs vue router params query ルートから取得できるもの
nuxt cordova web ハイブリッドアプリ作成した時のメモ
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
vuejs で omisejapan の決済フォーム作成した時のメモ
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
laravel vuejs 初期設定