javascript - 从 JQuery 的 get 请求转换为 Vue.js

Question

我是 js 新手，想将基于 JQuery 的 js 转换为 Vue。我想发送一个获取请求并输出回数据。这样做的最佳方法是什么？

这是 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>

下面是我的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);
    });
  });
});

编辑:这是到目前为止我对 axios 的了解:

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

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

  })
}

我不确定上面的代码是否正确或如何考虑按键和点击 - 有没有简单的方法可以做到这一点？

Answer 1

嗯，我不确定你想用这个 ajax 调用做什么，但希望这可以帮助你。 Vue 是数据驱动的，所以我总是尝试关注这方面。这是一个如何使用 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>

您的数据中必须包含这些模型

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

你的方法看起来像这样。

searchInput() {

    axios({

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

    }).then(response => {

        this.result = response.data;

    }).catch(error => {

        //handle error
    })
}

这是一个非常基本的示例。你可以用不同的方式完成相同的过程，你可以将输入传递给方法或循环结果，但这个想法是利用 Vue.js 数据驱动系统并首先考虑数据。

希望这会对您有所帮助，请记住转义您的输入并添加必要的验证。祝你好运