在mevn堆栈上显示收集项目

时间:2018-11-02 07:09:00

标签: node.js mongodb express vue.js

我有一个有关使用mevn堆栈进行电影分级的简单项目 这是我的应用程序外观: myapp 这是图片示例: sample picture

这是我的全部代码:

<template>
 <v-timeline>
  <v-timeline-item color="indigo lighten-2" fill-dot right v-for="movie in movies" :key="movie._id">
  <span class="grey--text" slot="opposite">{{ movie.release_year }} ‧ {{ movie.genre }}</span>
  <v-card>
    <v-card-title class="indigo lighten-2">
      <v-icon dark size="42" class="mr-3">
        movie
      </v-icon>
      <h2 class="display-1 white--text font-weight-light">{{ movie.name }}</h2>
    </v-card-title>
    <v-container>
      <v-layout>
        <v-flex xs10>
          {{ movie.description }}
        </v-flex>
        <v-flex xs2>
          <v-icon size="64">movie</v-icon>
        </v-flex>
      </v-layout>
    </v-container>
  </v-card>
</v-timeline-item>

这是我的JavaScript代码:

<script>
import axios from 'axios'
 export default {
 name: 'Movies',
 data () {
 return {
  movies: [],
  show: false
  }
 },
  mounted () {
  this.fetchMovies()
  },
 methods: {
  async fetchMovies () {
    return axios({
      //display all movies
      method: 'get',
      url: 'http://localhost:8081/movies'
    })
    .then((response) => {
      this.movies = response.data.movies
    })
    .catch(() => {})
    }
   } 
  }
</script>

像我的图片样本一样,如何创建条件以使位置不同

0 个答案:

没有答案