# 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
レンタルサーバー エックスサーバー レンタルサーバー エックスサーバー DMM fx DMM fx 開発/運用エンジニア募集プログラム 開発/運用エンジニア募集プログラム 外為ジャパンFX 新規口座開設促進 外為ジャパンFX 新規口座開設促進 eBay公式ショッピングサイト Qoo10 eBay公式ショッピングサイト Qoo10 Amazon.co.jpのカテゴリごとのページ

関連記事

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