使用accounting.js的Vuejs 2

Question

由于货币过滤器在vue2中不受欢迎，所以我需要导入/使用外部库accounting.js，但是在组件中使用accounting.js面临问题。

控制台显示的错误如下：

Vue警告:属性或方法“记帐”不是在实例上定义的，而是在呈现期间引用的。确保在data选项中声明反应性数据属性。(在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>

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

提前感谢

Hendra1

Answer 1

我找到了答案。在app.js中创建这样的全局过滤器

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

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

item.price | currency

Answer 2

你也可以把小数点传递给全局过滤器，我觉得这很方便。

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

然后在组件中使用它。

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

如果您不传递任何十进制值，它将保持原来的数字。

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

Answer 3

因为在你的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中，也不存在于数据或方法中。

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