Question

想要将参数（如http GET / POST参数）发送到vue模板。我们如何做到这一点以及在哪里（webpack或vue）

Answer 1

首先，它取决于你的库，我正在使用vue-resource，因为我发现它易于使用并且在语义上与Vue兼容。

如果你想在GET中发送一个URL参数，那很简单。

// Trashs a task, won't delete from db.
TrashTask: function (taskIndex, taskID, category) {
  this.$http.delete('/task/' + taskID).then(response => response.json()).then(result => {
    this.tasks.splice(taskIndex, 1);
    this.notify("Task deleted");
    this.UpdateCategoryCount(category, "-", 1);
  }).catch(err => {
    console.log(err);
    this.notify("Unable to trash Tash");
  });
},

POST / PUT参数有点不同。

首先，定义您的数据，在这里，我们发送this.task。在$http.put中，第二个参数是您传递的数据，第三个参数是{emulateJSON: true}，这样，JSON就会转换为您的常规参数，如name=sh&age=25。

如果您想阅读更多内容：https://github.com/thewhitetulip/intro-to-vuejs/blob/master/5_interacting_with_backend.md

完整代码：https://github.com/thewhitetulip/Tasks-vue/blob/master/public/static/js/app.js#L227

AddTask: function (item) {
  this.$http.put('/task/', this.task, {
    emulateJSON: true
  }).then(response => response).then(result => {
    if (this.task.ishidden == false) {
      this.tasks.push(this.task);
    }

    this.UpdateCategoryCount(this.task.category, "+", 1);

    this.task = {
      title: '',
      content: '',
      category: '',
      priority: '',
      comments: [],
      showComment: false
    }
  }).catch(err => {
    console.log(err);
    this.notify("Unable to add Task");
  });
  $('#addNoteModal').modal('hide');
},

Answer 2

使用axios。

axios是通过javascript调用get，put等的最佳和最简单的方法，允许你本地使用promises并异步工作。这是一个简单的例子

axios.get ('/ user? ID = 12345')
   .then (function (response) {
     console.log (response);
   })
   .catch (function (error) {
     console.log (error);
   });

vue，我们可以发送vue模板的请求参数

2 个答案:

使用axios。