質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.80%

Vue.jsのtemplateで<div>にv-forを入れると表示されない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 894

cometbeet

score 21

質問内容

現在Vue.jsの練習にphpからjavascritpに渡したデータでテーブルを作成しようとしていたのですが表記の通りtemplateで<div>にv-forを入れると表示がされません。
内容としてはphpでechoしたのをjavascriptのaxiosで受け取って一定数以上ならデータを分割し、分割ごとにテーブルを作るという感じです。
Vue DevToolsを見るとデータは問題ないようなので何がいけないのかよろしくお願いします。

状況

・Vue Devtools上で確認するとデータは問題ないよう。
・<div>のv-forを外せば問題なく表示できる。

プログラム

渡すデータなのですが多いため省略した形で表記させていただきます。
実際は30個のデータを含む配列を7個格納した配列が$dataに入っています。
それを今回は15個ずつに分割しています。

<?php
$data = [[1,1,1,1,1,1,1,...,1,1],
         [2,2,2,2,2,2,2,...,2,2], 
         ...
         [7,7,7,7,7,7,7,...,7,7]];
echo json_encode($data , JSON_UNESCAPED_UNICODE);
let TableMake = Vue.extend({
    data: function () {
        return {
            items: []
        }
    },
    mounted: function () {
        var self = this;
        axios
            .get('./ファイル名.php')
            .then(function (res) {
                let n = 15;
                let len = Math.round(res.data[0].length / n, 10);
                self.items = new Array(len);
                for(let j=0;j<len;j++){
                    self.items[j] = [];
                    for(let i = 0; i<res.data.length;i++){
                        self.items[j][i] = [];
                        self.items[j][i] = res.data[i].slice(j*n, j*n+n)
                    }
                }
            });
    },
    template: '<div v-for="item in items"><table v-for="ite in item">' +
        '<tr v-for="it in ite">' +
        '<td v-for="val in it">' +
        '{{val}}</td>' +
        '</tr></table></div>'

});
let app = new Vue({
    el: '#app',
    data: {
        name: 'Vue.js'
    },
    components: {
        'datatable': TableMake
    }
});
<div id="app">
     <datatable></datatable>
</div>

参考サイト

分割プログラムの元にしたサイト
axiosの使い方、テーブル作成の参考にしたサイト

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

単一のルート要素にあるように、コンポーネント内のルート要素は複数存在できません。

ですので、v-forを外すと表示できますし、つけるとルート要素が複数になり表示されません。

回避策としては↑のリンクにもあるようにもう一つ上位に<div>等でラップすることで回避できます。

<div v-for="">
~~
<div>

↓

<div>
  <div v-for="">
  ~~
  <div>
<div>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/04 11:21

    ありがとうございます!
    問題なく表示できました。
    すっかりその部分見逃してました。
    公式ドキュメントしっかり読むようにします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る