<template>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">排序</th>
        <th scope="col">類別</th>
        <th scope="col">商品名稱</th>
        <th scope="col">原價</th>
        <th scope="col">售價</th>
        <th scope="col">公開上架</th>
        <th scope="col">編輯</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(product, i) in productsList" :key="product.id">
        <th scope="row">{{ i }}</th>
        <td>{{ product.category }}</td>
        <td>{{ product.origin_price }}</td>
        <td>{{ product.title }}</td>
        <td>{{ product.price }}</td>
        <td>{{ product.enabled }}</td>
        <td>
          <button type="button" class="btn btn-primary me-2">編輯</button>
          <button type="button" class="btn btn-outline-danger">刪除</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import axios from "axios";
export default {
  name: "productsManageTable",
  data() {
    return {
      token: "",
      uuid: "---",
      productsList: [],
    };
  },
  methods: {
    // 從資料庫取得產品列表
    getProductList() {
      const api = `---`;
      // 先從瀏覽器 cookie 取得 token
      this.token = document.cookie.replace(
        /(?:(?:^|.*;\s*)loginToken\s*=\s*([^;]*).*$)|^.*$/,
        "$1"
      );

      // https://github.com/axios/axios#global-axios-defaults
      // 並且 header 按照後端 api 文件的規格要求填上 Bearer token 字樣
      axios.defaults.headers.common.Authorization = `Bearer ${this.token}`;
      axios
        .get(api)
        .then((res) => {
          console.log(res);
          this.productsList = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  
  // 當元件被建立好，就先取得產品列表
  created() {
    this.getProductList();
  },
};
</script>

上述內容有出入的話，希望大大們能在提點提點 (っಠ‿ಠ)っ