如何在Vue.js应用程序中加载数据

Question

I used the vue cli webpack to generate an app. Now I'm trying to load some data into a view without success. Here is code in current state:

main.js

 // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import BootstrapVue from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' Vue.config.productionTip = false Vue.use(BootstrapVue) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>', data: { exchanges: [ {name: 'gdax', price: 1450}, {name: 'bitfinex', price: 1525} ] } }) 

App.vue

 <template> <div id="app" class="container"> <h1>Arb Bot</h1> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; margin-top: 60px; } </style> 

routes/index.js

 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Opportunities from '@/components/Opportunities' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/opportunities', name: 'Opportunities', component: Opportunities } ] }) 

Opportunities.vue

 <template> <div> <h2>Bitcoin prices</h2> <table> <tr> <td>Exchange</td><td>Price</td> </tr> <tr v-for="exchange in exchanges" :key="exchange.name"> <td>{{ exchange.name }}</td><td>{{ exchange.price }}</td> </tr> </table> </div> </template> 

The view is rendering fine except the data isn't loading so the table rows with the exchange names aren't showing up in the browser.

How can I properly load the data into the view and print the table?

Thanks

Answer 1

el: '#app',

refers to the element with ID=app, which in your case is missing.

You can fix it by giving the table the id=app

<table id="app">