Full-Stack Vue.js 2 and Laravel 5

Changing the icon to reflect the
state
Our ListingSave component's icon will appear differently, depending on whether
or not the listing is saved; it will be opaque if the listing is saved, and transparent
if it is not. Since the component doesn't store its state locally, we need to retrieve
state from the store to implement this feature.
Vuex store state should generally be retrieved via a computed property. This
ensures that the component is not keeping its own copy, which would violate the
single source of truth principle, and that the component is re-rendered when the
state is mutated by this component or another. Reactivity works with Vuex state,
too!
Let's create a computed property isListingSaved, which will return a Boolean value
reflecting whether or not this particular listing has been saved.
resources/assets/components/ListingSave.vue: export default { props: [ 'id' ], methods: {
toggleSaved() { this.$store.commit('toggleSaved', this.id); } }, computed: {
isListingSaved() { return this.$store.state.saved.find(saved => saved ===
this.id); } } }
We can now use this computed property to change the icon. Currently we're
using the Font Awesome icon fa-heart-o. This should represent the unsaved state.
When the listing is saved we should instead use the icon fa-heart. We can
implement this with a dynamic class binding.
resources/assets/components/ListingSave.vue:
export default { props: [ 'id' ], methods: { ... }, computed: {
isListingSaved() { ...}, classes() { let saved = this.isListingSaved; return { 'fa':
true, 'fa-lg': true, 'fa-heart': saved, 'fa-heart-o': !saved } } } } ...
.listing-save .fa-heart { color: #ff5a5f; }
Now the user can visually identify which listings have been saved and which