Vue.js |过滤器不返回

我有个问题

我正在发布一个带有http post的类别id。状态返回的数据为true。我想从后面返回值count变量。但伯爵并没有回去。返回功能不起作用。函数中的值不会从外部返回

类别索引->视图

<td>{{category.id | count}}</td>

Vue文件

filters: {
 count: function(data){
  var count = '';
  this.$http.post('/admin/api/dpnblog/category/count' , {id:data} , function(success){
    count = success.status;
  }).catch(function(error){
    console.log('error')
  })
  return count;
 }
}

但不工作：（

谢谢大家。

查看

<td>{{count}}</td>

---

注意：由于您使用的是>/Cord>，这意味着您有一个完整的表，您可能需要考虑同时获得它们，以减少后端调用的数量。 过滤器用于简单的就地字符串修改，如格式化等。 考虑使用一个方法来取回这个值。

模板

<td>{{ categoryCount }}</td>

---

示例很简单，但

this.$http.post

函数中的值不起作用。ajax是一种异步操作，因此在数据到来之前将返回计数为“”。您应该修改Javascript中的承诺工作方式。

返回计数将在承诺解析之前立即执行。这不是过滤器的用途。@Chibiao.Wang C你能给我举个例子吗？我已经给出了答案
data() {
    return {
      count: '',
    }
  },
  mounted() {
    // or in any other Controller, and set your id this function
    this.countFunc()
  },
  methods: {
    countFunc: function(data) {
      this.$http
        .post('/admin/api/dpnblog/category/count', { id: data }, function(
          success,
        ) {
          // update view
          this.count = success.status
        })
        .catch(function(error) {
          console.log('error')
        })
    },
  },

<td>{{ categoryCount }}</td>

data() {
  return {
     categoryCount: ''
  }
},
created() {
  this.categoryCount = this.fetchCategoryCount()
},
methods: {
 async fetchCategoryCount() {
  try {
    const response = await this.$http.post('/admin/api/dpnblog/category/count', {id: this.category.id})
    return response.status;
  } catch(error) {
    console.error('error')
  }
 }
}