Как добавить пользовательский ввод vue & axios api call? - PullRequest
Новая
       11

Как добавить пользовательский ввод vue & axios api call?

0 голосов
/ 21 февраля 2019

Я пытаюсь добавить пользовательский ввод для запроса, который нужно добавить в мое приложение, которое использует 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>

1 Ответ

0 голосов
/ 21 февраля 2019

Похоже, вы не правильно связали свой ввод.

измените ваши данные на 

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

и url-адрес axios на 

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