CODEWITHSUNDEEP
vue.jsaxiosuser-input
Asim
Asim

Reputation: 31

How to add user input vue&axios api call?

I am trying to add a user input for a query to add to my application, which utilizes a News API. Working with Vue and Axios. It works with default links, however, implementing a user input for 'query' it doesn't work.

So simply I I am trying to add a search a feature for the user to insert any news topic they would like. Would appreciate any guidance and solutions.

Kind Regards

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>

Upvotes: 1

Views: 511

Answers (1)

Manu
Manu

Reputation: 173

It looks like you didn't bind your input correctly.

change your data to

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

and axios url to

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

Upvotes: 1

Related Questions