[Vue.js] 初歩の初歩：データ配列の出力 (v-for)

2023年4月9日 by Extrose

システムエンジニア

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Vue.js test</title>
  </head>
  <body>

    <div id="vueelement">
      <p v-for="line in datas">ID={{ line.id }}, Text={{ line.text }}</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.11/dist/vue.js"></script>
    <script src="vue_main.js"></script>

  </body>
</html>

Javascript : vue_main.js

"use strict"

let jsonData;
fcreate();

new Vue({ 
  el: '#vueelement',
  data: jsonData
});

function fcreate(){
  jsonData = {
    datas:[
      { id: 1, text: "sample1"},
      { id: 2, text: "sample2"},
      { id: 3, text: "sample3"}
    ]
  }
}

結果

補足

v-for の流れはこんな感じ

el = vueelement と指定されているので、id=vueelement となっているdiv が対象となる
その中にある要素が v-for をコールする、このv-for は「datas」のデータを「line」として格納せよとしている
その要素内のマスタッシュ構文では「line」のデータを用いている

el となっているオブジェクトに v-for を組み込むことはできない (vue.jsでエラーとなる)
必ず子供を持つ

ちなみに、Vue で記載している data には別でJsonデータを作成して渡すようにした
もちろん直接指定もできるが、実際にこの v-for を活用するならこの形が多いと思ったので、それをサンプルにした

コメントを残すコメントをキャンセル