I'm currently delving into the world of VueJS, and for my personal project, I'm pairing it with Laravel 5.7. However, I'm facing a bit of a challenge when it comes to implementing a simple feature - a "like" button/icon.
Here's the scenario: I have a page that showcases different posts from my database. At the bottom of each post, I'd like to include a "like toggle" button, designed as an icon followed by the number of likes on that post. Initially, the button should display the data retrieved from the corresponding database table. When clicked, it should increment the displayed number by one and add a new like entry in the database.
I've created the "like" icon as a component:
<section class="bottomInfo">
<p>
<likes now="{{ $article->likes }}"></likes>
<span class="spacer"></span>
<span class="entypo-chat">
{{ $article->comments }}
</p>
</section> <!-- end .bottomInfo -->
As you can see, I've included a <likes> tag with a now prop that holds the initial database value for likes. However, I'm unsure of where and how to store this value in my app to connect with axios for updating the likes.
Below is the component structure:
<template>
<span class="entypo-heart"> {{ now }}</span>
</template>
<script>
export default {
props: ['now'],
data() {
return {
like: this.now
}
},
mounted() {
console.log('Component mounted.');
}
}
</script>
I've attempted to pass the now value to the data function within a property called like. However, when I try to access it in my main Vue instance, I receive an 'undefined' result.
The value of 'like' property is undefined
Am I approaching this correctly? How can I properly access and update this value upon click to interact with my API? I'm not seeking the specific implementation details for these tasks, but rather guidance on how to integrate them in this context. Is my understanding of the component logic accurate?