Help us understand the problem. What is going on with this article?

【Vue】The template root disallows 'v-for' directives. 解決法

テンプレートルートは、'v-for'ディレクティブを許可しません。

分割したコンポーネントでv-forを使ったところ、このようなエラーが、、、:point_down:

The template root disallows ‘v-for’ directives.
(翻訳にかけると「テンプレートルートは、'v-for'ディレクティブを許可しません」と言う意味)

スクリーンショット 2020-10-20 21.00.42.jpg

なんじゃこりゃ??

コードはこんな感じ

<template>
  <app-stock v-for="stock in stocks" :key="stock.id"></app-stock>
</template>

<script>
import Stock from './Stock.vue';
export default {
    data() {
        return {
            stocks: [
                { id: 1, name: 'BMW', price: 110 },
                { id: 2, name: 'Google', price: 210 },
                { id: 3, name: 'Amazon', price: 250 },
                { id: 4, name: 'Sony', price: 260 },
            ]
        }
    },
    components: {
        appStock: Stock,
    }
}
</script>

Componentの中の処理はすべてsingle root elementで囲わなければならない

なんだか難しそうな言葉ですが、要するに「何か別のタグで囲え」という事

<template>
 <!--  適当にdivタグで囲った -->
  <div>
    <app-stock v-for="stock in stocks" :key="stock.id"></app-stock>
  </div>
</template>

<script>
import Stock from './Stock.vue';
export default {
    data() {
        return {
            stocks: [
                { id: 1, name: 'BMW', price: 110 },
                { id: 2, name: 'Google', price: 210 },
                { id: 3, name: 'Amazon', price: 250 },
                { id: 4, name: 'Sony', price: 260 },
            ]
        }
    },
    components: {
        appStock: Stock,
    }
}
</script>

というわけで、<div>v-forを囲いました。。

kokogento
エストニアの電子国民。2020/09より、東京で人生初の正社員プログラマーに。 〇活を記録するアプリをIonic + Angularで開発し、運営中。アプリについては下記URLを参照。現在Vueを学習中。。。
https://gengendiary.world/first-app/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away