[Vuejs]-Vue , can we send request parameter for vue template

by

0👍

First of all, it depends on your library, I am using vue-resource, because I find it easy to use and compatible with Vue semantically.

If you want to send a URL argument in a GET, it is simple.

// 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 arguments are a bit different though.

First, define your data, here, we are sending the this.task. In the $http.put, the second argument is the data which you pass, the third argument is {emulateJSON: true}, that way, the JSON gets converted into your normal parameters like name=sh&age=25.

If you want to read more: https://github.com/thewhitetulip/intro-to-vuejs/blob/master/5_interacting_with_backend.md

Complete code: 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');
},

0👍

Use axios.

axios is the best and easiest way to make calls get, put etc via javascript, allows you to work natively with promises and work asynchronously.
here is a trivial example

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

Leave a comment