Getting these images to render in Vue.js

January 12, 2022

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 class="loved-it">
    <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="lovedit in 
 lovedits" v-bind:key="lovedit.id">
            <div class="portfolio-wrap">
              <img :src="`${lovedit.movie.box_art}`" v-bind:alt="movie.box_art" />
              <br />
              <div class="portfolio-info">
                 <div class="portfolio-links"></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;
    });
   },'''