[Day 19]

說明:
vue實作刪除使用者頁面

一、forloop 刪除button

<ul>
      <li v-for="(user, index) in userList" :key="index">
        使用者名稱: {{user.name}}, 年齡: {{user.age}}
        <button @click="deleteUser(user.id, index)" :disabled = userDeleteButton>刪除此使用者</button>
      </li>
</ul>

這裡click事件對應到deleteUser方法，並且disabled是props變數，防止點擊後重複送出請求。

二、javascript

deleteUser(userId, index) {
      if(!userId) {
        alert("無ID無法刪除")
        return
      }
      
      var url = baseUrl + '/user'

      this.userDeleteButton = true
      request.delete({
        url: url,
        json:userId,
        headers: {'content-type' : 'application/x-www-form-urlencoded'} 
        }, (err, res, body) => {
          console.log(body)
          this.userList.splice(index, 1)
          this.userDeleteButton = false
      })
    }
    

對應的方法判別userId是否存在，再凍結button，並呼叫server /user的delete method。
成功後將此筆資料從頁面中移出。

[Day 19結束]