我有这段使用 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。那么如何正确访问该装置?
答案 0 :(得分: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
};