Converting from get request from JQuery to Vue.js

Question

I am new to js and would like to convert my JQuery-based js to Vue. I want to send a get request and output back the data. What is the best way of doing this?

Here is the html:

<div>
  <div>
    <input type="text" id="var1" placeholder="Search...">
  </div>
  <div>
    <button id="submit">Submit</button>
  </div>
</div>
<div>
  <p>Results</p>
  <p id="results"></p>
</div>

Below is my js:

$(document).read(function() {
  $('#var1').keypress(function(e) {
    if (e.keyCode == 13)
      ('#submit').click();
  });
});

$(document).ready(function() {
  $("#submit").click(function() {
    var var1 = document.getElementById("var1").value

    // sends get request to URL
    $.getJSON("URL" + var1, function(search, status) {
      console.log(search);
      // cont.
      $("#results").text(search.results);
    });
  });
});

EDIT: Here is what I have so far with axios:

function performGetRequest() {
  var var1 = document.getElementById('var1').value;

  axios.get('URL', {
    params: {
      id: var1
    }
  })
  .then(function (response) {
    console.log(search);

  })
}

I am not sure if the above code is correct or how to factor in keypress and click-- is there a simple way to do that?

Have you tried anything yet? Nobody is going to do the work for you. — thedarklord47
– thedarklord47, Commented Jul 2, 2018 at 19:31
@thedarklord47 yes I tried using various directives but not sure how the get request comes in — ffnna21
– ffnna21, Commented Jul 2, 2018 at 19:43
if you are using Vue, you should use v-model instead of document.getElementById to get the input value — Sovalina
– Sovalina, Commented Jul 2, 2018 at 20:34
You should wrap around the input and button with a form tag and handle the submit event in vue — Jose Munoz
– Jose Munoz, Commented Jul 2, 2018 at 20:35

Eli · Accepted Answer · 2018-07-03 13:47:53Z

3

Well, I am not sure what you want to do with this ajax call, but hopefully this may help you. Vue is data driven, so I always try to focus on that aspect. So this is an example of how you can access and input and send the data using axios.

<div>
  <div>
    <input v-model='input' type="text" placeholder="Search...">
  </div>
  <div>
    <button @click="searchInput()">Submit</button>
  </div>
</div>
<div>
  <p>Results</p>
  <p >{{ result }}</p>
</div>

you must have those models in your data

// Your data
data() {
    return {
        input: '',
        result: '',
    }
}

and your method will look something like this.

searchInput() {

    axios({

        method: 'GET',
        url: url + this.input,

    }).then(response => {

        this.result = response.data;

    }).catch(error => {

        //handle error
    })
}

So this is a very basic example. you can do the same process in different ways, you could pass the input to the method or loop over the results, but the idea is taking advantage of Vue.js data driven system and think data first.

Hopefully this will help you, remember to escape your input and add necessary validations. Good luck

answered Jul 3, 2018 at 13:47

Eli

9829 silver badges21 bronze badges

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

2 Comments

ffnna21 Over a year ago

Thank you for the detailed response and your patience

Eli Over a year ago

Your welcome. I'm can highly recommend watching laracast.com tutorials on Vue and Vue testing, they are a great way to get a good introduction into Vue. Good luck

Collectives™ on Stack Overflow

Converting from get request from JQuery to Vue.js

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