Vuejs 2 Using accounting.js

Question

Since the currency filter is deprecated in vue2 I need to import/ use external library accounting.js But I'm facing problem to use accounting.js in my component.

The console show error like this:

[Vue warn]: Property or method "accounting" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in component at C:\project\resources\assets\js\components\ItemProductView.vue)

Here is my app.js

require('./bootstrap');

var accounting = require('./accounting');

module.exports = accounting;    

import BannerView from './components/BannerView.vue';
import CategoryView from './components/CategoryView.vue';
import TopProductView from './components/TopProductView.vue';    

const app = new Vue({
    el: '#app',
    data:{
        message: 'hello'
    },
    components:{
        BannerView, CategoryView, TopProductView
    },

});

and the TopProductView.vue file:

    <template>
    <div class="row">
        <div class="col-sm-6 col-md-3" v-for="item in list">
            {{accounting.formatNumber(item.price)}}
            <item-product-view :item="item"></item-product-view>
        </div>
    </div>
</template>

<script>
    import ItemProductView from './ItemProductView.vue';

    export default {
        mounted() {
            this.fetchList();
        },
        components:{
            ItemProductView
        },
        data() {
            return {
                list: [],
            };
        },
        methods: {
            fetchList: function() {
                    this.$http.post(window.BaseUrl+'/top-product').then(function (response) {
                    this.list = response.data;
                });
            },
        }
    }

</script>

Please help me to find the solution...

Thanks in advance

Hendra1

hendra1 · Accepted Answer · 2017-02-20T14:58:09.033

10

I found the answer.. Create a global filter like this in app.js

Vue.filter('currency', function(val){
    return accounting.formatNumber(val)
})

and use it in the component like usual

item.price | currency

edited Feb 20 '17 at 14:58

answered Dec 05 '16 at 06:54

hendra1

1,359
1
15
24

score 1 · Answer 2 · answered Jan 10 '18 at 23:42

You can also pass decimal points to the global filter which I find really handy.

Vue.filter('currency', function(val, dec){
return accounting.formatMoney(val, '$', dec)
})

and then use it in your component

{{ item.price | currency(2) }} // $1,200.00

If you don't pass any decimal value it will keep original number.

{{ item.price | currency }} // $1,200

score 0 · Answer 3 · answered Nov 02 '16 at 06:07

0

Because in your TopProductView.vue:

<div class="col-sm-6 col-md-3" v-for="item in list">
    {{accounting.formatNumber(item.price)}}
    <item-product-view :item="item"></item-product-view>
</div>

You can think accounting.formatNumber() as this.accounting.formatNumber(), and the accounting doesn't exist in your ViewModel, neither data nor methods.

Wrap the accounting.formatNumber with a method in the ViewModel, or use a computed property.

answered Nov 02 '16 at 06:07

CodinCat

15,530
5
49
60

1

Adding to that, you could make it available everywhere like this: `Vue.prototype.$accounting = accounting` (do this before starting the App). Then you can use $accounting() in any template. – Linus Borg Nov 02 '16 at 10:21
Hi thank for reply, I have tried both solution but still no luck.. is there any another solution? – hendra1 Nov 11 '16 at 12:03

score 0 · Answer 4 · answered Aug 14 '18 at 03:50

0

You can try:

import {accounting} from './accounting.js'
window.accounting = accounting

Vue.filter(currency, function(val) {
  return window.accounting.toFixed(val, 2); // or use whatever accounting function you want.
})

answered Aug 14 '18 at 03:50

Clayton.

1

Vuejs 2 Using accounting.js

4 Answers4