From the course: Vue.js 2 for Web Designers

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Adding data to our component

Adding data to our component - Vue.js Tutorial

From the course: Vue.js 2 for Web Designers

Start my 1-month free trial

Adding data to our component

- [Instructor] In this video, we're going to start populating our Vue instance with real data and incorporating it into the template. The way we're going to make this work is by copying markup straight out of our mockup and making the dynamic parts in the Vue parlance reactive data. So, over here in my editor, I have the mockup file open as well as the index.html and app.js. We can use go to line, Control + G to go down to line 114 which is where most of the action happens here. If I mess over into the gutter, I can collapse everything that appears here in the customizer div and just copy the entire thing like this. When switching over to my index.html file, I can scroll down to the same place on line 114 and just paste over what I had before. I don't need the message anymore and I copied the entire customizer div so there it is. So I have all the little areas where my static image goes, my sizes, color, everything's there. But now I need to use some of my inventory data to populate…

Contents