VueJS access data attribute from another attribute

Question

I have this code that uses the VueGoodTable component, and I need the user to be able to change the unit of the amount (a mone on the fly :

<template>
  <div class="container">
    <h1>This is the datatable page</h1>
    <div class="unit">
      <!-- Basic radio that will select the unit (v-model="unit") (options are 1, 1000 and 1000000), I confirmed that this works using vue-devtools and does indeed change the unit -->
    </div>
    <vue-good-table :columns="columns" :rows="rows" />
  </div>
</template>

<script>
import "vue-good-table/dist/vue-good-table.css";
import { VueGoodTable } from "vue-good-table";

export default {
  components: {
    VueGoodTable,
  },
  data() {
    return {
      // I need to access this unit at the formatFn function below
      unit: 1000,
      columns: [
        // Reference and title columns
        {
          label: "Amount",
          field: "amount",
          type: "number",
          formatFn: function (val) {
            let returnedVal = val / 100;
            // I need to access the unit here, "this" returns the wrong object : {label: "Amount", field: "amount"...}, so doing this.unit is wrong
            returnedVal = returnedVal / this.unit;
            return returnedVal.toFixed(2);
          },
        },
      ],
      rows: [],
    };
  },
  // methods to fetch the rows using a fake json-server api
};
</script>

As you can see, the value comes out as NaN. So how do I access the unit correctly ?

Boussadjra Brahim · Accepted Answer · 2021-07-16 17:11:34Z

1

columns should be a computed property to react to the unit changes :

export default {
  components: {
    VueGoodTable,
  },
  data() {
    return {
      // I need to access this unit at the formatFn function below
      unit: 1000,
     
      rows: [],
    };
  },
computed:{
   columns(){
    return [
        
        {
          label: "Amount",
          field: "amount",
          type: "number",
          formatFn: (val) =>{
            let returnedVal = val / 100;
            returnedVal = returnedVal / this.unit;
            return returnedVal.toFixed(2);
          },
        },
      ]


 }
}
  // methods to fetch the rows using a fake json-server api
};

answered Jul 16, 2021 at 17:11

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abderrahim Benmelouka Over a year ago

I just tried this, didn't work for me as "this" still refers to "{label: "Amount", field: "amount", type: "number", typeDef: {…}, formatFn: ƒ}"...

Abderrahim Benmelouka Over a year ago

Oh I didn't implement your solution fully, my bad. I kept using "function(val)" instead of "(val) =>", it works now, thank you.

Boussadjra Brahim Over a year ago

You're welcome, it's my pleasure to see that works for you

Collectives™ on Stack Overflow

VueJS access data attribute from another attribute

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related