Ich habe ein Problem mit meiner Website, das ich seit mindestens ein paar Wochen zu beheben versuche, also hatte ich gehofft, dass mir jemand sagen könnte, wo ich falsch liege. Zum Hintergrund: Ich bin frischgebackener Absolvent und dies ist das Schlussprojekt, das ich für mein Abschlussprojekt erstellt habe. Vor der Demo hatte ich nicht ganz alle Funktionen, die ich wollte, jetzt, da ich den Kurs, den ich versuche, abgeschlossen habe Um eine Einführung zu geben. Funktionen, die meiner Meinung nach fehlen. Abgesehen davon habe ich mithilfe eines Rails-Backends und eines Vue-Frontends mit einem Bootstrap-Thema eine Wunschliste mit Horrorfilmen erstellt, die ich zur Beobachtungsliste hinzufügen und sie entweder zur Liebling-Liste oder zur Hass-It-Liste hinzufügen kann, aber das Letzte, was ich will, ist Denn wenn Sie auf die Schaltfläche klicken, um es zu dieser Liste hinzuzufügen, wird es aus der unbeobachteten Liste entfernt. Ich habe im Backend einen booleschen Wert eingerichtet, aber ich schaffe es beim besten Willen nicht, die Logik richtig hinzubekommen, um ihn von „wahr“ auf „falsch“ umzudrehen. Ich weiß nicht, ob ich etwas im Frontend brauche oder was, aber wie ich schon sagte, wir Ich versuche seit mindestens zwei Wochen, dieses Problem zu lösen, daher wäre jede Hilfe großartig.

Meine Architektur

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

Meine Rails aktualisieren und erstellen Funktionen (ich denke, das ist das Problem, aber ich kann es einfach nicht erkennen.)

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

Ich habe ein Frontend mit Schaltflächen und Methoden zum Wechseln zu verschiedenen Listen, die funktionieren, aber wenn ein Film in die Liste „Gefällt mir“ oder „Gefällt mir nicht“ verschoben wird, wird der Film nicht aus der Liste der nicht angesehenen Filme entfernt,

<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>