Vue.js에서 DRF API로 데이터 보내기

아래의 기사에서 작성한 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>