I have been running into an issue with my website that I have been banging my head against now for at least a couple of weeks so I hope someone can shine some light on where I am going wrong. For a little background I am a recent grad and this was my capstone project that I built for my final project and I didn’t quite get all of the functionality that I wanted before my presentation and now that I am done with class I am trying to introduce that function that I felt it was missing. That being said I built a horror movie bucket list with a Rails backend and a Vue frontend with a bootstrap theme and I have it to where you can add movies to a watchlist and got it to the point where you can add them to a loved it or hated it list but the last thing that I would like is when you click the button to add it to said list it would delete it off of the unwatched list. I have a boolean set up on the backend but for the life of me I cannot get the logic right to get it to flip from true to false I don’t know if I need something on the front end or what but like I said I have been trying to figure this out for at least two weeks so any help would be awesome.
My Schema
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 assume this is where the problem is 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
My frontend with the buttons and methods to move to the different lists that work but will not remove the movie from the unwatched list when it is moved to the loved it or hated it 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>
>Solution :
Could it be that you are assigning instead of comparing in the if statement here?
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