接續處理口袋餐廳清單右側的「移除」鈕功能。

(2)口袋餐廳清單-移除鈕
分為資料渲染與觸發方法兩部分說明。

1.「移除」鈕的限制
只能移除口袋餐廳清單（以下簡稱口袋清單）中該筆資料，即一次只能移除一筆所選的餐廳。

2.當清單中「移除」鈕被操作時

• 會觸發方法裡的 delPucket(item) 函式
  • 使用 v-for 渲染列口袋清單時，每一列「移除」按鈕上的 @click 事件處理程序會自動傳遞該列數據（即 item ）給方法， item 資訊包含 type 、 brandName 、 address 。簡單來說就是點擊該列「移除」鈕會回傳這筆口袋餐廳的資料。
  • 接著方法裡的 delPucket(item) 會利用接收到的 item 參數進行運算。
    • 先使用 axios.get() 取得會員廳餐 API 資料並賦值給變數 userData 。
    • 透過 findIndex 方法找出會員欲移除的這個餐廳在會員廳餐 API 裡是第幾筆（即找出其索引值）。
    • 取得的索引值利用陣列方法 splice （刪除陣列中指定資料）將會員廳餐 API 裡該筆餐廳資料刪除。
    • 最後將處理完的資料寫回會員餐廳 API 並用 axios.put() 進行網路請求。
    • 執行 userPocket() 函式使頁面上的餐廳資料能夠即時呈現。

<template>
  ...
  <table class="table table-bordered">
    <thead>
      <tr>
        <th scope="col" class="table-secondary">品牌受眾</th>
        <th scope="col" class="table-secondary">品牌名稱</th>
        <th scope="col" class="table-secondary">地址</th>
        <th scope="col" class="table-warning">動作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in userResList" v-bind:key="item">
        <td>{{ item.type }}</td>
        <td>{{ item.brandName }}</td>
        <td>{{ item.address }}</td>
        <td class="table-warning">
          <button type="button" @click="delPucket(item)">移除</button>
        </td>
      </tr>
    </tbody>
  </table>
  ...
</template>

<script>
...
export default {
  data() {
    return {
      restaurants: [],
      userResList: [],
      ...
      apiUserResUrl: "",
      ...
    };
  }
...
  methods: {
    ...
    delPucket(item) {
      axios.get(this.apiUserResUrl).then((res) => {
        console.log(res);
        const userData = res.data[0];
        const dataIndex = userData.userRestaurants.findIndex(
          (dataIndex) => dataIndex.brandName === item.brandName
        );

        userData.userRestaurants.splice(dataIndex, 1);

        axios
          .put(this.apiUserResIdUrl, userData)
          .then((res) => {
            console.log(res);
            alert("成功移除該筆餐廳");

            this.userPocket();
          })
          .catch((error) => {
            console.log(error);
            alert("該筆餐廳移除失敗，請洽網站管理員!");
          });
      });
    },
  },
  ...
};
</script>