VueJS динамически получает вычисляемые свойства

#javascript #vue.js #vuejs2 #vue-component

#javascript #vue.js #vuejs2 #vue-компонент

Вопрос:

Мне нужно вычислить сумму computed свойств, которая начинается со calculateSum строки.

Я не уверен, как это сделать, поскольку я не могу получить их имена с помощью 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'] метод доступа с использованием скобок, поскольку экземпляр компонента является объектом :

 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>