画面に何も表示されない

https://qiita.com/maisuto/items/2bf1b072f189a65d6f6e
の記事に沿ってvue.jsを作っています。
App.vueに

<template>
  <div>
    <v-card>
      <v-container grid-list-lg>
        <v-layout row wrap>
          <v-flex xs6 v-for="data in questions" :key="data.id">
            <v-card color="primary" class="white--text">
              <v-card-title primary-title>
                <div>{{ data.questionText }}</div>
              </v-card-title>
              <v-card-text>
                <div>{{ data.pubDate|printDate }}</div>
              </v-card-text>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-card>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

と、
Index.vueに

<script>
import axios from 'axios'
import moment from 'moment'

export default {
  name: 'PollIndex',
  data () {
    return {
      questions: []
    }
  },
  methods: {
    fetchData () {
      axios.get('http://localhost:8000/api/1.0/questions/').then(res => {
        this.questions = res.data.results
      })
    }
  },
  filters: {
    printDate (val) {
      return moment(val).locale('ja').format('YYYY年MM月DD日(ddd) HH時mm分ss秒')
    }
  },
  mounted () {
    this.fetchData()
  }
}
</script>

と、
index.jsに

import Vue from 'vue'
import Router from 'vue-router'
import PollIndex from '@/components/Poll/Index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'PollIndex',
      component: PollIndex
    }
  ]
})

とかいて、npm run devで起動しましたが、ブラウザに真っ白な画面が表示されました。エラーは何も出ていません。何が問題なのでしょうか？

行動規範の内容に同意します

回答1件

App.vueのテンプレートに問題があります。

<v-card>, <v-container>, <v-layout> ... とかのコンポネントの設定が一切ない
１が出来たとしても、v-flexで参照しているquestionsがApp.vueに定義されてない。
App.vueにdataに関する部分が作成されてない。
Index.vueというソースを作ったのはいいんですが、それをApp.vueから使う仕組みになってない

エラーがないと書いてますが、ブラウザーからf12を押してみるといろいろエラーが出ているはずだと思います。

多分、やりたかった形はこうなると思います。

Typescript
1<!-- App.vue -->
2<template>
3  <div>
4    <PollIndex/>
5  </div>
6</template>
7
8<script>
9  import PollIndex from '@/components/Poll/Index'
10
11  export default {
12    name: 'App',
13    components: {
14      PollIndex
15    }
16  }
17</script>

Typescript
1<!-- Index.vue -->
2<template>
3  <div>
4    <v-card>
5      <v-container grid-list-lg>
6        <v-layout row wrap>
7          <v-flex xs6 v-for="data in questions" :key="data.id">
8            <v-card color="primary" class="white--text">
9              <v-card-title primary-title>
10                <div>{{ data.questionText }}</div>
11              </v-card-title>
12              <v-card-text>
13                <div>{{ data.pubDate|printDate }}</div>
14              </v-card-text>
15            </v-card>
16          </v-flex>
17        </v-layout>
18      </v-container>
19    </v-card>
20  </div>
21</template>
22
23<script>
24import axios from 'axios'
25import moment from 'moment'
26
27export default {
28  name: 'PollIndex',
29  data () {
30    return {
31      questions: []
32    }
33  },
34  methods: {
35    fetchData () {
36      axios.get('http://localhost:8000/api/1.0/questions/').then(res => {
37        this.questions = res.data.results
38      })
39    }
40  },
41  filters: {
42    printDate (val) {
43      return moment(val).locale('ja').format('YYYY年MM月DD日(ddd) HH時mm分ss秒')
44    }
45  },
46  mounted () {
47    this.fetchData()
48  }
49}
50</script>
51