Beitrag zum Express-Router von Vue.JS

Question

Ich versuche, Daten von einem vue.js Frontend zu meinem Express/Knoten-Backend zu posten. Der POST scheint durchzugehen, aber im Backend bekomme ich nur ein undefiniertes leeres Array.

Front End:

main.js

var app = new Vue({ 
el: '#app', 
data: { 
    guests: [], 
    code: '', 
    showGuests: true 
}, 
methods: { 
    saveGuests: function() { 
     $.ajax({ 
      type: "POST", 
      url: '/api/rsvp/' + this.code, 
      data: this.guests, 
      success: function() { 
       this.showGuests = false; 
       // do more stuff to handle submission 
      }, 
      dataType: 'json' 
     }); 
    }, 
... 

Zurück Ende:

app.js

//body parser 
var bodyParser = require('body-parser') 

//express 
var express = require('express'); 

// cfenv provides access to your Cloud Foundry environment 
// for more info, see: https://www.npmjs.com/package/cfenv 
var cfenv = require('cfenv'); 

// create a new express server 
var app = express(); 

var rsvp = cloudant.db.use('rsvp'); 

// get the app environment from Cloud Foundry 
var appEnv = cfenv.getAppEnv(); 

// parse application/x-www-form-urlencoded 
app.use(bodyParser.urlencoded({ 
    extended: false 
})) 

// parse application/json 
app.use(bodyParser.json()) 

// serve the files out of ./public as our main files 
app.use(express.static(__dirname + '/public')); 

//endpoint to post rsvp details 
app.post('/api/rsvp/:code', function(req, res) { 
    console.log(req.body); 
    res.send('POST request received successfully') 
}); 

// start server on the specified port and binding host 
app.listen(appEnv.port, '0.0.0.0', function() { 
    // print a message when the server starts listening 
    console.log("server starting on " + appEnv.url); 
}); 

Die guests Array von einer anderen Funktion bestückt ist, die ich ausgelassen habe. Es sieht wie folgt aus:

[{ 
    fullName: "john smith", 
    rsvpStatus: "Not Responded" 
},{ 
    fullName: "Mr Stack Overflow", 
    rsvpStatus: "Yes" 
}] 

die console.log auf dem Knoten Server nur ist mir dies nach einer POST Versuch geben:

{ undefined: [ '', '' ] } 

Jede Hilfe wäre toll. Vielleicht muss ich etwas mit Vue-Datenbindungen machen, bevor ich sie posten kann? Ich bin neu in Vue und mache so ziemlich sicher etwas falsch.

Dank: D

Answer 1

verwaltet, um dies selbst zu beantworten. Aus irgendeinem Grund führte die Verwendung von jQuery-POST innerhalb von Vue zu Problemen. Ich fügte hinzu, die "vue-resource" plugin für vue und dann konnte die gleiche POST tun mit:

this.$http.post('url', data);