- Full-Stack Vue.js 2 and Laravel 5
- Anthony Gore
- 138字
- 2021-07-02 19:57:18
Mock listing
While we're developing, it'd be nice to work with some mock data so that we can see how our completed page will look. I've included sample/data.js in the project for this very reason. Let's load it in our document, making sure it goes above ourapp.jsfile.
index.html:
<body> <p id="toolbar">...</p> <p id="app">...</p> <script src="node_modules/vue/dist/vue.js"></script> <script src="sample/data.js"></script> <script src="app.js"></script> </body>
Have a look at the file and you'll see that it declares a sample object. We will now utilize it in our data configuration.
app.js:
data: { title: sample.title, address: sample.address, about: sample.about }
Once you save and refresh, you'll see more realistic data on the page:
Figure 2.5. Page including mock-listing sample
Using global variables split over different script files in this way is not an ideal practice. We'll only be doing this in the prototype, though, and later we'll get this mock-listing sample from the server.