vuejs
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
Components 78<br />
1 <br />
2 <br />
5 <br />
6 <br />
1 Vue.component('story', {<br />
2 ...<br />
3 props: ['story', 'favorite'],<br />
4 ...<br />
5 });<br />
setFavorite method malfunctioning<br />
Hmmm, favorite still doesn’t get updated when setFavorite is executed. The button disappears<br />
as expected and a star icon appears but variable favorite is still null. This results in the user being<br />
able to favorite all stories.<br />
The problem with this approach is that we don’t keep things synced. By default, all props form a<br />
one-way-down binding between the child property and the parent one. When the parent property<br />
updates, it will flow down to the child, but not the other way around.<br />
This may be confusing but stick with me. In Vue, you can enforce a two-way binding with<br />
.sync binding type modifier. So, we will pass the variable favorite to each story like this<br />
:favorite.sync="favorite".