Welcome to part 5 of a new series where I will create a full stack web application using Vue.js and Express.js
GitHub repo: https://github.com/codyseibert/tab-tracker
Follow Cody on Twitter: https://twitter.com/CodyLSeibert
Learn to code for free and get a developer job: https://www.freecodecamp.com
Read hundreds of articles on programming: https://medium.freecodecamp.com
source
Hello, thank u for your tutorial.Should we need to use Vuex for a project like this one?
00:00 view song
26:52 Youtube view
35:48 tab view
Is anyone else having a problem with the show endpoint sending back all db records, instead of just the one matching the songId sent? Using sequelize 5, so I'm having to use findByPk. Here's my show endpoint
async show (req, res) {
try {
const song = await Song.findByPk(req.params.songId)
res.send(song)
} catch (err){
res.status(400).send({
error: `${err}'An error has occured trying to create the song '`
})
}
}
he pass parameters to the edit song .Why he specific the route path like: path: '/songs/:songId/edit ? rather then path: '/songs/:songId/edit/:songId'
Hi Cody,,Great work and great way of doing the tutorial. People understand the nuances of coding and lot more since your video exactly shows what you are doing. I would say there is a lot to learn by the way you are coding if people watch with attention to details. Patience is the key.
Song.findById need change to Song.findByPk
I'm getting the same value of route params by just using this.$route.params.id, whats the point of storing it in the store ? O_O
With Sequelize v5, findById() was replaced by findByPk(). Replace findById using findByPk and everything should work fine
For anyone watching this tutorial recently. I ran across an issue where my show would keep catching a 500 error. It is because "findById" is deprecated in the new sequelize. Instead, use "findByPk" – 'find by primary key'. Works like a charm.
At 8:32 in the video, I am following exactly the code to get a single song view but keep on getting a 500 error. I get the following error: Error in mounted hook (Promise/async): "Error: Request failed with status code 500". Any ideas on what might be causing this. I have spent several hours trying to debug and cannot seem to find what is causing the error. Thanks 🙂
Great tutorial! I went down the path of making another application after making the login and I was wondering how I could persist the vuex store state of tokens and users after a page refresh. If anyone could point me in the right direction that would be wonderful. Thanks
Why do you get the parameters from the store rather than the router?
it's the best you can find on youtube
full-stack
thanks cody
Vuetify kiind of sucks… and is way different when I'm using it vs this tut
It's a good tutorial, but very difficult to follow along
am having this problem Error: Invalid value { title: { '$like': '%f%' } }. I dont know what to do
Cody, great tutorials! I've learned a lot. Thank you. You were suggesting that there was a different way to return to the previous page. After searching I found this: this.$router.go(-1). Works just like the back button assuming your browser is keeping the history.
Also, instead of sending the id separately, I just use the id value in the body. Is there any reason not to do it that way?
Thanks again! Looking forward to 6 & 7.
Cody, hopefully in the future you will 'git branch Partx' so us poor fools can get back on track since the master is completely different than what you are doing here in Part 5. Maybe it's me but I am getting bored with UI copy.paste of html when this is supposed to be about VueJS. Just saying. Overall nice job but decided to look up the final code for what I can learn. I think this series could of done in half the time if you just put your design hat on before coding….
Why not using <pre> tag for tabs?
hey cody thank you very much , and i face a problem in this part
const areAllFieldsFilledIn = Object.keys(this.song).every(key => !!this.song[key])
if (!areAllFieldsFilledIn) {
this.error = 'Please fill in all the required fields.'
return
}
in edit song page if i remove this part it's going to be right but if i use it it give me error that is "Please fill in all the required fields."
although i already filled all inputs!!!