VueJS 从另一个属性访问数据属性

Question

我有这段使用 VueGoodTable 组件的代码，我需要用户能够更改金额的单位（即时使用：

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

如您所见，该值显示为 NaN。那么如何正确访问该装置？

Answer 1

columns 应该是对 unit 更改做出反应的计算属性：

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
};