VueJS 动态获取计算属性

Posted 2023-02-23

【中文标题】VueJS 动态获取计算属性

【英文标题】：VueJS get computed properties dynamically

【发布时间】：2021-01-13 04:23:51

【问题描述】：

我需要计算以calculateSum 字符串开头的computed 属性的总和。

我不知道该怎么做，因为我无法使用 this.computed 获取他们的名字

所以我的方法/尝试是：

getSubTotal()
    var computed_names = [];
    var computed_names_filtered = computed_names.filter(x => return x.startsWith('calculateSum'))
    return _.sum(computed_names_filtered.map(x => eval(x+'()'))

你知道怎么做吗？

【参考方案1】：

也许这可以帮助您获得计算列表：

this.$options.computed

【参考方案2】：

您可以使用this['computed_name'] 使用bracket accessor 动态访问它们 因为组件实例是一个对象：

var computed_names = Object.keys(this);
var computed_names_filtered = 
computed_names.filter(x => return x.startsWith('calculateSum'))
 _.sum(computed_names_filtered.map(x => this[x]))

请注意，计算属性是在没有() 的情况下调用的，但如果你想调用一个方法，你可以使用this['method_name']()

例子：

// ignore the following two lines, they just disable warnings in "Run code snippet"
Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue(
  el: '#app',
  computed: 
    op1() 
      return 1;
    ,
    op2() 
      return 2;
    ,
    op3() 
      return 23;
    ,
    total() 
      return ['op1', 'op2', 'op3'].map(o => this[o]).reduce((acc, curr) => acc += curr, 0)

    
  ,
   
)

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">
  total
</div>