ok so here is what I am running into for my final project for my class I am building an app that is like a movie bucket list using a bunch of hard coded data because I couldn’t find an api that would cooperate so I can get my watchlist to render but it only renders as a hash not with the box art or anything like that. This is my JavaScript and HTML using vue.js any help would be massively appreciated.

this is all that will render

`<template>
  <div >
    <div v-for="list in lists" v-bind:key="list.id">
      <i>{{ list }}</i>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data: function () {
    return {
      list: [],
      lists: [],
    };
  },
  created: function () {
    this.indexLists();
  },
  methods: {
    indexLists: function () {
      axios.get("/lists").then((response) => {
        this.lists = response.data;
        console.log("list", response.data);
      });
    },
  },
};
</script>
`

CodePudding user response：

You will want to create a folder and put all the movie posters in there, name them poster-movie_id.png e.g. poster-3.png then in your code

<template>
  <div >
    <div v-for="list in lists" v-bind:key="list.id">
        <img src="images/posters/poster-{{ list.movie_id }}.png">
    </div>
  </div>
</template>