Vuejs 2 使用 accounting.js

Question

因为货币过滤器在 vue2 中被弃用我需要导入/使用外部库 accounting.js 但是我在组件中使用 accounting.js 时遇到问题。

控制台显示如下错误：

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

这是我的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
    },

});

和TopProductView.vue文件：

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

请帮我找到解决办法...

提前致谢

亨德拉1

Answer 1

因为在你的 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>

您可以将 accounting.formatNumber() 视为 this.accounting.formatNumber()，而 accounting 不存在于您的 ViewModel 中，既不存在数据也不存在方法。

用 ViewModel 中的方法包装 accounting.formatNumber，或使用计算的属性。

Answer 2

我找到了答案.. 在 app.js

中创建这样的全局过滤器

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

并像往常一样在组件中使用它

item.price | currency

Answer 3

您还可以将小数点传递给全局过滤器，我觉得这非常方便。

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

然后在你的组件中使用它

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

如果您不传递任何小数值，它将保留原始数字。

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

Answer 4

你可以试试：

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.
})

Vuejs 2 使用 accounting.js

Vuejs 2 Using accounting.js

javascript

vue.js

accounting.js

laravel-5.3