ใช้ฟังชั่นใน {{ function() }} แล้วไม่ขึ้นผลลัพธ์ครับ

[ceofourfactplus]

<template>
  <div>
    <nav-app>Topping Category</nav-app>
    <div class="row">
      <div class="col-11 wrap-search">
        <SearchBar @search="search_by_typing" />
      </div>
      <div style="padding-left: 0px">
        <button class="btn-ghost" @click="$router.push({name:'CreateCategoryTopping'})">
          + New
        </button>
      </div>
    </div>
    <!-- Table -->
    <div class="table" style="margin-top: 10px">
      <div class="table-header">
        <!-- Is Staff -->
        <div style="margin:auto" class="row">
          <div class="col-1"></div>
          <div class="col-5 w-100" style="margin: auto">Name</div>
          <div class="col-5 w-100" style="margin: auto">Topping&#160;Qty</div>
          <div class="col-1"></div>
        </div>
      </div>
      <div
        style="
          height: 750px;
          overflow-y: scroll;
          overflow-x: hidden;
          border-radius: 10px;
        "
      >
        <div>
          <div
            class="row table-item"
            v-for="(item, idx) in categories"
            :key="idx"
            style="
              padding-right: 0px;
              margin: 10px 0px 0px 0px;
              background-color: #303344;
              border-radius: 10px;
            "
          >
            <div class="col-1" style="text-align: left; width: 100%">
              <img src="../../assets/icon/trash.png" style="width:100%" alt="">
            </div>
            <div class="col-5" style="margin:auto; width: 100%">
              {{ item.category }}
            </div>
            <div class="col-5" style="margin-left: 40px">
              {{ get_topping(item.id) }}
            </div>
            <div class="col-1">
              <img
                src="../../assets/icon/edit.png"
                alt="img"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SearchBar from "../../components/materials/SearchBar.vue";
import NavApp from "../../components/main_component/NavAppHam.vue";
import { api_product } from "../../api/api_product";

export default {
  components: {
    SearchBar,
    NavApp,
  },
  mounted() {
    this.is_staff = this.$store.state.auth.userInfo["is_staff"];
    this.fetchToppingCategories();
  },
  data() {
    return {
      alert: false,
      categories: [],
      temp_categories: [],
    };
  },
  methods: {
    fetchToppingCategories() {
      api_product.get("topping/category/").then((response) => {
        this.categories = response.data;
        this.temp_categories = response.data;
      });
    },
    search_by_typing(val) {
      var temp = [];
      if (val == "") {
        this.categories = this.temp_categories;
      } else {
        this.temp_categories.forEach((element) => {
          if (element.category.indexOf(val) + 1 != 0) {
            temp.push(element);
          }
        });
        this.categories = temp;
      }
    },
    get_topping(category_id) {
      api_product
        .get("category/get-amount-topping/" + category_id)
        .then((reponse) => {
          return reponse.data.amount;
        });
      // return 'html'
    },
  },
};
</script>

[ceofourfactplus]

[tanin-t]

get_topping(category_id) {
      api_product
        .get("category/get-amount-topping/" + category_id)
        .then((reponse) => {
          return reponse.data.amount;
        });
      // return 'html'
    }

ปัญหามาจากฟังก์ชันนี้ไม่ได้ return อะไรออกไปเลย

[ceofourfactplus]

แต่ผมลอง console.log(reponse.data.amount) ก็มีข้อมูลนะครับ

[tanin-t]

ที่ return มันเป็น function ที่อยู่ด้านใน ไม่ใช่ get_topping()