08.02.2017 Views

vuejs

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Components 72<br />

Vue warn: Unknown custom element: - did you register the component correctly?<br />

For recursive components, make sure to provide the “name” option.<br />

To fix this we need to register the Component again. This time we have to make some changes to<br />

the component’s template. We will change plot attribute to body and tag to to suit our<br />

needs.<br />

So, the story’s template will be:<br />

1 <br />

2 <br />

3 {{ story.writer }} said "{{ story.plot }}"<br />

4 <br />

5 <br />

But the component will be the same.<br />

1 Vue.component('story', {<br />

2 props: ['story'],<br />

3 template: '#story-template'<br />

4 });<br />

If you run the above code you will see for yourself that everything works same as before but this<br />

time with the use of a custom component.<br />

Pretty neat huh?<br />

6.6 Altogether now<br />

Using our newly acquired knowledge we should be able to build something a bit more complex.<br />

Taking the structure example from before, we are going to create a voting system for our stories,<br />

and add a favorite feature. The way to accomplish these is through methods, directives, and of<br />

course, components.<br />

Lets start with the stories setup.

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!