Vue.js |筛选器不返回

Question

我有问题。

我正在发布带有 http 帖子的类别 ID。 状态是返回一个 true 的数据。我想从后面返回值计数变量。但计数不会回去。返回函数不起作用。函数中的值不会从外部返回。

类别索引 -> 视图

<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>这意味着您有一个完整的表; 您可能需要考虑一次获取所有内容以减少后端调用的数量。

筛选器用于简单的就地字符串修改，如格式设置等。 请考虑改用一种方法来获取此内容。

模板

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

Answer 2

视图

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