时间戳

首页 > 解决方案 > 使用 vue 连接来自 api 的信息

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>

标签： javascripthtmlvue.js

解决方案

假设对象上有类似url属性的东西movie：

<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是 的简写v-bind:href。这将创建到属性的绑定，该绑定被视为反应式 JavaScript 表达式

推荐阅读