Question

我试图为查询添加用户输入，以添加到使用新闻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>

Answer 1

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

将数据更改为

Using index, using where

和axios网址

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

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

1 个答案: