I'm having an issue with my site that I've been trying to fix for at least a few weeks, so I was hoping someone could point me out where I'm going wrong. For some background, I'm a recent grad and this is the capstone project I built for my final project, before the demo I didn't quite get all the features I wanted, now that I've finished the course I'm trying to give an introduction Features that I feel are missing. That being said, I built a wishlist of horror movies using a Rails backend and a Vue frontend with a Bootstrap theme that I can add to the watchlist and either add them to the loved list or hate it list, but the last thing I want is for when you click the button to add it to said list, it removes it from the unwatched list. I have a boolean set up on the backend but for the life of me I can't get the logic right to flip it from true to false I don't know if I need something on the frontend or what but like I said I we Been trying to solve this problem for at least two weeks now, so any help would be great.
My architecture
create_table "hatedits", force: :cascade do |t| t.integer "movie_id" t.integer "user_id" t.string "box_art" t.datetime "created_at", precision: 6, null: false t.datetime "updated_at", precision: 6, null: false end create_table "lists", force: :cascade do |t| t.integer "user_id" t.integer "movie_id" t.boolean "watched" t.datetime "created_at", precision: 6, null: false t.datetime "updated_at", precision: 6, null: false end create_table "lovedits", force: :cascade do |t| t.integer "movie_id" t.datetime "created_at", precision: 6, null: false t.datetime "updated_at", precision: 6, null: false t.integer "user_id" t.string "box_art" end create_table "movies", force: :cascade do |t| t.string "name" t.string "description" t.string "box_art" t.string "sub_genre" t.datetime "created_at", precision: 6, null: false t.datetime "updated_at", precision: 6, null: false t.integer "year" t.string "category" end create_table "users", force: :cascade do |t| t.string "name" t.string "email" t.string "password_digest" t.datetime "created_at", precision: 6, null: false t.datetime "updated_at", precision: 6, null: false end end
My Rails update and create functions (I think that's the problem, but I just can't see it.)
def create list = List.create( user_id: current_user.id, movie_id: params[:movie_id], watched: false, ) if list.save render json: list else render json: {errors: list.errors.full_messages}, status: 406 end end def update list = List.find_by(id: params[:id]) list.movie_id = params[:movie_id] || list.movie_id if watched = true render json: list end if list.save render json: list else render json: {errors: list.errors.full_messages}, status: 406 end end
I have a frontend with buttons and methods for moving to different lists which work but when a movie is moved to the liked or disliked list it does not remove the movie from the unwatched list,
<template> <div class="list"> <br /> <br /> <br /> <br /> <br /> <section id="portfolio" class="portfolio"> <div class="container"> <div class="row portfolio-container"> <div class="col-lg-4 col-md-6 portfolio-item filter-app" v-for="list in lists" v-bind:key="list.id"> <div class="portfolio-wrap"> <img :src="`${list.movie.box_art}`" /> <br /> <div class="portfolio-info"> <div class="portfolio-links"> <button v-on:click="lovedIt(list)">Loved It</button> <br /> <br /> <button v-on:click="hatedIt(list)">Hated It</button> </div> </div> </div> </div> </div> </div> </section> </div> </template> <style> .list { text-align: center; color: white; } img { height: 624px; width: 370px; } </style> <script> import axios from "axios"; export default { data: function () { return { list: {}, lists: {}, movie: [], currentUser: localStorage.getItem("user_id"), }; }, created: function () { this.indexLists(); }, methods: { indexLists: function () { axios.get("/lists").then((response) => { this.lists = response.data; console.log("list", response.data); }); }, addMovie: function () { axios.post("/lists", this.movie).then(() => { this.$router.push("/lists"); }); }, lovedIt: function (list) { this.list = list; axios .post("/lovedits", { user_id: this.currentUser.id, movie_id: this.list.movie_id, }) .then(() => { console.log("yo"); this.$router.push("/lovedit"); location.reload(); }); }, hatedIt: function (list) { this.list = list; axios .post("/hatedits", { user_id: this.currentUser.id, movie_id: this.list.movie_id, }) .then(() => { console.log("sup"); this.$router.push("/hatedit"); location.reload(); }); }, }, }; </script>
Are you doing an assignment instead of a comparison in the
if
statement here?