Question

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

控制台显示如下错误：

[Vue警告]：财产或方法＆＃34;会计＆＃34;未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。（在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

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

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

然后在您的组件中使用它

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

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

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

Answer 2

因为在 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 3

您可以尝试：

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

3 个答案: