Vue.js _

Question

我有个问题。

我正在张贴一个类别id与http post。status正在返回一个真实的数据。我想从后面返回值计数变量。但伯爵不回去。返回函数不起作用。函数中的值不会从外部返回。

类别索引->视图

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

控制器文件

/**
* @Access(admin=true)
* @Route(methods="POST")
* @Request({"id": "integer"}, csrf=true)
*/
public function countAction($id){
 return ['status'  => 'yes'];
}

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;
 }
}

但不起作用:(

谢谢你们。

Answer 1

视图

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

vue

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')
        })
    },
  },

Answer 2

注意:由于您使用的是<td>，这意味着您有一个完整的表；您可能需要考虑一次获得它们，以减少后端调用的数量。

过滤器用于简单的就地字符串修改，如格式化等。请考虑使用一种方法来获取它。

模板

<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')
  }
 }
}