How to add user input vue&axios api call?

Question

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>

Manu · Accepted Answer · 2019-02-21 11:04:45Z

1

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"')

answered Feb 21, 2019 at 11:04

Manu

1732 gold badges2 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Asim Over a year ago

How would I make it submit the request?

Manu Over a year ago

Create a new button with click event. <button @click="loadNews">Submit</button>

Collectives™ on Stack Overflow

How to add user input vue&axios api call?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related