How to place my method parameter into the array property

Question

I didn't found any solution on google, maybe I understand my problem wrongly.

So I want to write a reusable function in vue.js, which gets the data from a specific table from a database.

Everything works fine, just the last part, inserting the result to the app data.

As you can see in the code I created the data field health_weights it has the same name as the mysql database table, to get a list of different weights.

The goal is to use the same function also for different database tables like animals_groups or car_speeds and keeping the same function like getData("animals_groups") or getData("car_speeds").

The function will then get the list from the php script (which works fine). And then place the data into the vue app data array like health_weights[] or animal_groups[] (which doesn't work).

Hope there is an easy solution for that which I just don't know.

Thanks

I tried using the variable in the data property which didn't worked

// Template
<div class="list">
  <div v-for="(weights, index) in health_weights" :key="index">
    <p>{{weights.created}} x {{weights.weight}}kg</p>
  </div>
</div>

// Script
<script>
var app = new Vue({
    el: '#weight',
    data: {
        health_weights: [],
    },
    created(){
        this.getData("health_weights");
    },
    methods: {
        getData: function(table){
            var bodyFormData = new FormData();
            bodyFormData.set('type', "getData");
            bodyFormData.set('table', table);
            axios({
                method: 'post',
                url: 'api/health.php',
                data: bodyFormData,
                config: { headers: {'Content-Type': 'multipart/form-data' }}
            })
            .then(function (response) {
                //app.health_weights = JSON.parse(response.data);
                app.table = response.data;
                console.log(response.data);
            })
            .catch(function (error) {
                console.log(error);
            });
        },
    },
})
</script>

I receive no error just an empty list in the frontend.

Answer 1

You should use an arrow function (response)=>{} in order to access the vue instance (this) properly, and you could access the data property as follows :

 this[table]=....

this refers to your vue instance.

HTML
<div class="list">
  <div v-for="(weights, index) in health_weights" :key="index">
    <p>{{weights.created}} x {{weights.weight}}kg</p>
  </div>
</div>

VUEJS
<script>
var app = new Vue({
    el: '#weight',
    data(){
        return{
      health_weights: [],
             }
    },
    created(){
        this.getData("health_weights");
    },
    methods: {
        getData: function(table){
            var bodyFormData = new FormData();
            bodyFormData.set('type', "getData");
            bodyFormData.set('table', table);
            axios({
                method: 'post',
                url: 'api/health.php',
                data: bodyFormData,
                config: { headers: {'Content-Type': 'multipart/form-data' }}
            })
            .then((response) =>{
                //app.health_weights = JSON.parse(response.data);
                this[table] = response.data;
                console.log(response.data);
            })
            .catch(function (error) {
                console.log(error);
            });
        },
    },
})
</script>