concatenating using vue with information from an api

Question

I'm wanting take information from an api for example imdbID and just add ".html" afterwards so I can then make it a variable I can put inside the href of a button. But I'm stuck on how to do this, thank you in advance.

Here is the js:

new Vue({
  el: '#app',
  data: {
    movies: [],
    search: '',
  },
  created() {
    var vm = this
    axios.get('https://www.omdbapi.com/?s=Harry+Potter&apikey=a9018efb')
      .then(function(response) {
        vm.movies = response.data.Search
      })
  },
  computed: {
    getMovies() {
      return this.movies.filter(movie => {
        return movie.Title.toLowerCase().includes(this.search.toLowerCase());
      })
    }
  }
})

and here is the important bit of HTML:

          <div class="card-body">
            <h5 class="card-title">{{ movie.Title }}</h5>
            <p class="card-text">{{ movie.Year }}</p>
            <p class="card-text"></p>
            <a href="" class="btn btn-primary">View Movie</a> //This is where I'm wanting the variable to go
          </div>

Dan · Accepted Answer · 2020-12-12 00:58:27Z

1

Assuming there is something like a url property on the movie object:

<div class="card-body">
   <h5 class="card-title">{{ movie.Title }}</h5>
   <p class="card-text">{{ movie.Year }}</p>
   <p class="card-text"></p>
   <a :href="movie.url + '.html'" class="btn btn-primary">View Movie</a>
</div>

:href is shorthand for v-bind:href. This creates a binding to the attribute, which is treated as a reactive JavaScript expression

answered Dec 12, 2020 at 0:58

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Speeed Over a year ago

I'm trying to add .html to imdbID of the film for example something like AA0000001.html, then this will be file in my directory that it would link to, but not sure how I would do that

Dan Over a year ago

Is the linked page part of your app too? If so, you'll want to use a <router-link> instead and it won't be a link to another page, but to another route (In a single page app, there's only the one page, index.html, but routes give the illusion of more). If not, you can put the pages in the public directory. This would be kind of uncommon but you might have a reason for doing it.

dotcoder · Accepted Answer · 2020-12-12 01:06:26Z

0

You can modify the created method as follows.

created() {
    var vm = this
    axios.get('https://www.omdbapi.com/?s=Harry+Potter&apikey=a9018efb')
      .then(function(response) {
        vm.movies = response.data.Search;
        vm.movies.forEach(function(m){
            m.movieUrl = m.url + '.html';
        });
      })
  },

Modify the anchor tag as follows. <a :href="movie.movieUrl" class="btn btn-primary">View Movie //This is where I'm wanting the variable to go

answered Dec 12, 2020 at 1:06

dotcoder

2,95110 gold badges35 silver badges50 bronze badges

Collectives™ on Stack Overflow

concatenating using vue with information from an api

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related