plunkerでvue その46

概要

plunkerでvueやってみた。
練習問題、やってみた。

練習問題

vuetifyとaxiosを使って、get,post,put,deleteを実装せよ。

サンプルコード

new Vue({
  el: "#app",
  data() {
    return {
      dialog: false,
      isCreate: true,
      editedItem: {
        id: 0,
        name: '',
        email: 0
      },
      headers: [{ 
        text: 'ID', 
        value: 'id' 
      }, {
        text: '名前',
        value: 'name',
      }, { 
        text: 'メルアド', 
        value: 'email' 
      }, {
        text:'修正/削除',
        value:'delete',
        sortable:false
      }],
      serverDatas:[],
    }
  },
  computed: {
    formTitle() {
      return this.isCreate ? 'New Item' : 'Edit Item'
    }
  },
  watch: {
    dialog(val) {
      val || this.close()
    }
  },
  methods: {
    deleteItem(item) {
      confirm('削除しますか') && this.deleteUser(item)
    },
    editItem(item) {
      this.isCreate = false
      this.editedItem = item
      this.dialog = true
    },
    close() {
      this.dialog = false
    },
    save() {
      if (!this.isCreate) 
      {
        this.update()
      } 
      else 
      {
        this.create()
      }
      this.dialog = false
    },
    update() {
      axios.patch('https://jsonplaceholder.typicode.com/users/' + this.editedItem.id, {
        name: this.editedItem.name,
        email: this.editedItem.email
      }).then(response => this.users.unshift(response.data)).catch(error => conalert(error))
    },
    create() {
      axios.post('https://jsonplaceholder.typicode.com/users', {  
        name: this.editedItem.name,
        email: this.editedItem.email
      }).then(response => this.serverDatas.unshift(response.data)).catch(error => alert(error))     
    },
    deleteUser(item) {
      axios.delete('https://jsonplaceholder.typicode.com/users/' + item.id).then(response => console.log(response)).catch(error => alert(error)) 
      const index = this.serverDatas.indexOf(item)
      this.serverDatas.splice(index, 1)
    },
  },
  created() {
    axios.get('https://jsonplaceholder.typicode.com/users').then( res => {
      this.serverDatas = res.data
    }).catch(e => {
      alert(e)
    }).finally(()=>{
      //alert("通信完了")
    })
  }
})

成果物

以上。