Javascript 使用vue连接来自api的信息

我想从一个api中获取信息，比如imdbID，然后添加“.html”，这样我就可以把它变成一个变量，放在按钮的href中。但我一直在想怎么做，先谢谢你

以下是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());
      })
    }
  }
})

下面是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>

{{movie.Title}
{{movie.Year}

//这就是我想要变量去的地方

假设

电影

对象上有类似

url的属性：


{{movie.Title}
{{movie.Year}


：href
是
v-bind:href
的缩写。这将创建一个与属性的绑定，该属性被视为反应式JavaScript表达式。您可以如下修改创建的方法

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';
        });
      })
  },

修改锚定标记，如下所示。
查看电影//这就是我想要变量的位置
我正在尝试将.html添加到电影的imdbID中，例如类似AA0000001.html的内容，然后这将是我目录中的文件，它将链接到该文件，但不确定我将如何做这也是应用程序的链接页面部分吗？如果是这样的话，你会想改用
，它将不是指向另一个页面的链接，而是指向另一个路由（在一个单页面应用程序中，只有一个页面index.html，但路由给人更多的错觉）。如果没有，您可以将页面放在
public
目录中。这可能有点不寻常，但你可能有这样做的理由。