VueのJS 2＆Axios POSTリクエスト - フォーム

Question

私はaxiosを使用して自分のフォームを投稿しようとしていますが、私はexpressjs

をこれは私がやっている何をされて使用して私のバックエンドにデータを取得することはできませんよ。

<template> 
<form class="" method="post" @submit.prevent="postNow"> 
<input type="text" name="" value="" v-model="name"> 
<button type="submit" name="button">Submit</button> 
</form> 
</template> 

export default { 
    name: 'formPost', 
    data() { 
    return { 
     name: '', 
     show: false, 
    }; 
    }, 
    methods: { 
    postNow() { 
    axios.post('http://localhost:3030/api/new/post', { 
    headers: { 
     'Content-type': 'application/x-www-form-urlencoded', 
    }, 
    body: this.name, 
    }); 
    }, 
    components: { 
    Headers, 
    Footers, 
    }, 
}; 

バックエンドファイル：

app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: true })); 
router.post('/new/post', (req, res) => { 
    res.json(console.log("this is working" + ' ' + req.body.name)); 
}); 

私は受け付けており、エラーがある：

this is working undefined 

Answer 1

Axios post形式：

axios.post(url[, data[, config]])が

あなたの要求は次のようになります。

axios.post('http://localhost:3030/api/new/post', 
    this.name, // the data to post 
    { headers: { 
     'Content-type': 'application/x-www-form-urlencoded', 
     } 
    }).then(response => ....); 

フィドル：https://jsfiddle.net/wostex/jsrr4v1k/3/