Ok so this is what is going on I built this horror movie bucket list app as my final project for my bootcamp and the MVP went over well and I got my certification but since I have graduated I want to add a little more functionality to this app kind of the stuff that I did not get around to doing before the end of classes. With that being said I have created a list that will display movies that you mark as loved it on a different page I can get it to throw my to the right page and console log stuff that I put in so all of my methods and stuff are working as correctly as I think that I need them. But the big issue is that the box art that I have on my backend (ruby) will not render on the page I have stared at this for three days and my brain hurts using the syntax that I am using on all of the other pages works there but not on this page. Any help would be greatly appreciated.

'''<template>
  <div >
    <section id="portfolio" >
      <div >
        <div >
          <div  v-for="lovedit in 
 lovedits" v-bind:key="lovedit.id">
            <div >
              <img :src="`${lovedit.movie.box_art}`" v-bind:alt="movie.box_art" />
              <br />
              <div >
                 <div ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
 </template>
<script>
import axios from "axios";
export default {
  data: function () {
    return {
      movie: [],
      lovedits: {},
    };
  },
  created: function () {
    axios.get("/lovedits/").then((response) => {
       console.log("loved it", response);
       this.movie = response.data;
    });
   },'''

CodePudding user response：

You are looping thru lovedits data property and set response to movie try to set your response to lovedits