如何添加用户输入 vue&axios api 调用？

我正在尝试添加一个用户输入以将查询添加到我的应用程序中，该应用程序利用了新闻API。与Vue和Axios一起工作。它可以使用默认链接，但是，实现"查询"的用户输入不起作用。

所以我很简单我正在尝试为用户添加搜索功能，以插入他们想要的任何新闻主题。会感谢任何指导和解决方案。

善意

var vm = new Vue({
el: '#app',
data:{
  status:''
},
created: function(){
this.loadNews();
},
methods:{
loadNews: function(){
  this.status = 'Loading...';
  var vm = this;
  axios.get('https://newsapi.org/v2/everything?q=' + query + "&apiKey=6d2c267eacd549e79d27f597d7917699"')
  .then(function(response){
vm.status = response.data.articles[0].author + response.data.articles[0].title + response.data.articles[0].url;
  })
  .catch(function(error){
    vm.status = 'An error occurred' + error;
  })
}
}
});

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>App</title>
    <link rel="stylesheet" href="master.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>  </head>
  <body>
    <div id="app">
      <input type="text" v-model="query">
      <p>{{ status }}</p>
  
    </div>
<script src="script.js"></script>
  </body>
</html>

看起来您似乎没有正确绑定输入。

将数据更改为

data:{
  status:'',
  query: ''
}

和axios url to

axios.get('https://newsapi.org/v2/everything?q=' + this.query + "&apiKey=6d2c267eacd549e79d27f597d7917699"')

相关内容

最新更新

热门标签：