以下の記事で作成したAPIに対して、今度はPOSTでデータを送信、データベースに登録したい。
JsfiddleのVue.jsからDRFで作成したapiにアクセスしたい

環境

book/models.py

from django.db import models
import uuid
from django.utils import timezone

# Create your models here.
class Book(models.Model):
    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
    title = models.CharField(verbose_name='タイトル', max_length=50)
    price = models.IntegerField(verbose_name='価格')
    created_at = models.DateTimeField(default=timezone.now)

    def __str__(self):
        return self.title

また、Vue.jsはjsfiddle上に記載しています。

登録したいデータ

Bookテーブルに新規のデータとして、titleフィールドとpriceフィールドを登録したいです。
idとcreated_atは自動で追加されるのでスルーでOK。

Vue.jsを書いていく

html

<div id="app">
  <div>
    <h1>GET</h1>
    <p>タイトル : {{ results[1].title }}</p><hr>
  </div>
  
  <div>
    <h1>POST</h1>
    <h2>タイトル : {{ title }}</h2>
    <h2>¥{{ price }}</h2>
    <input v-model='title'>
    <input v-model='price'>
    <button v-on:click='postBook'>送信</button>
  </div>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

javascript

new Vue({
  el: '#app',
  data: {
    results: [],
    title: '',
    price: '',
  },
  methods:{
  	postBook: function(){
    	console.log('Hello')
      axios.post('http://127.0.0.1:8000/apiv1/book/', 
      { title : this.title , price : this.price })
    }
  },
  mounted() {
    axios.get('http://127.0.0.1:8000/apiv1/book/')
    .then(response => {this.results = response.data})
 },
})

inputタグでv-modelディレクティブを使い、titleとprice設定。
Vueインスタンスに同じ名前のdataオブジェクトを定義し、中身は空にしておきます。

methodsにpostBookを登録。buttonタグにv-onディレクティブを使い、登録します。

postBookメソッドでは、axios.post('一覧画面のエンドポイント', { フィールド名:データ, フィールド名:データ})とし、フィールドとそれに対するデータをPOSTしている。

ここまでで以下とおり。

送信する

送信を押すと...

追加されてます。

数字にカンマをつける

値段を表示する際にカンマをつけたい場合は、Vueインスタンス内にfilter作り、適用させたいテンプレートのマスタッシュにパイプ=|でfilterを適用させます。

vueインスタンス

  filters: {
    comma(value) {
      if (!value) return ''
      value = value.toString()
      return value.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
 }
 }

html

<h2>¥{{ price | comma }}</h2>