Dynamic way to fetch computed properties in VueJS

Question

Dynamic way to fetch computed properties in VueJS

I am trying to find a way to calculate the sum of computed properties that begin with the string calculateSum.

The challenge is that I cannot access their names using this.computed.

Here is my approach:

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

Can you think of another way to achieve this task?

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

Here is a quick snippet that may assist you in accessing the computed properties list:

this.$options.computed

Answer 2

Here is a quick snippet that may assist you in accessing the computed properties list:

this.$options.computed

Answer 3

Answer №2

You have the ability to dynamically access them using this['computed_name'] with the use of the bracket accessor since the component instance acts as an object :

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]))

Please note that when calling the computed property, you should not include (), however if you intend to invoke a method you can use this['method_name']()

Here is an example:

// ignore these two lines below, they are for disabling 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>

Answer 4

You have the ability to dynamically access them using this['computed_name'] with the use of the bracket accessor since the component instance acts as an object :

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]))

Please note that when calling the computed property, you should not include (), however if you intend to invoke a method you can use this['method_name']()

Here is an example:

// ignore these two lines below, they are for disabling 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>

Dynamic way to fetch computed properties in VueJS

Answer №1

Answer №2

Similar questions

Using Vue to change select box data separately

Check the box to show the corresponding sections of the form

What is the best way to incorporate a custom string into an Angular application URL without disrupting its regular operation?

Why is there a discrepancy between the value displayed in a console.log on keydown and the value assigned to an object?

A guide on sending arrays from javascript to a Laravel controller through axios

What is the best way to extract information from a JSON XHR request and incorporate it into my template?

What is the best way to execute a JavaScript function when the onSelect event of a jQuery datepicker is

Converting MongoDB Queries to MySQL in Node: A Step-by-Step Guide

Failure in Retrieving Fresh Information via Ajax Call

How do I prevent my image slider from scrolling to the top of the page when I click next or prev?

Tips for showcasing several images with accompanying content once the webpage has finished loading

Removing duplicate values in Vue after sorting

The dilemma between installing Electron or installing Electron-Builder: which one

What is the best way to display elements in a v-for loop with varying intervals?

Bypass domain restrictions on JavaScript in Firefox version 7.0

Invoke a method on a child component once an event has been emitted

*NgFor toggle visibility of specific item

changing the css transformation into zoom and positioning

Steps for implementing a select all feature with jQuery

Create a JavaScript function that accepts an argument and can be called both with and