Estoy tratando de publicar datos desde un front-end vue.js a mi back-end express/node. El POST parece funcionar, pero en el backend solo obtengo una matriz vacía indefinida.
Interfaz: 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' }); }, ... Parte trasera: 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); }); La matriz de guests está poblada por otra función que he omitido. Se parece a esto:
[{ fullName: "john smith", rsvpStatus: "Not Responded" },{ fullName: "Mr Stack Overflow", rsvpStatus: "Yes" }] el console.log en el servidor del nodo me está dando esto después de un intento de POST:
{ undefined: [ '', '' ] }Cualquier ayuda sería genial. ¿Tal vez hay algo que deba hacer con los enlaces de datos de Vue antes de publicarlos? Soy nuevo en Vue, así que casi seguro que estoy haciendo algo mal.
Gracias: D
Logré responder esto yo mismo. Básicamente, por alguna razón, usar jQuery POST dentro de Vue estaba arruinando las cosas. Agregué el complemento "vue-resource" para vue y luego pude hacer el mismo POST usando:
this.$http.post('url', data);