Vuejs 2 using accounting.js

Question

Da der Währungsfilter in vue2 veraltet ist Ich muss externe Bibliothek importieren/verwenden accounting.js Aber ich habe das Problem, Accounting.js in meiner Komponente zu verwenden.

Die Konsole zeigen Fehler wie folgt aus:

[Vue warnen]: Eigenschaft oder Methode „Buchhaltung“ definiert ist, nicht auf die Instanz, sondern während machen verwiesen. Stellen Sie sicher, dass reaktive Dateneigenschaften in der Datenoption deklariert sind. (in der Komponente unter C: \ project \ resources \ assets \ js \ components \ ItemProductView.vue)

Hier ist meine

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

}); 

und die TopProductView.vue app.js Datei:

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

Bitte helfen Sie mir die Lösung zu finden ...

Vielen Dank im Voraus

Hendra1

Answer 1

fand ich die Antwort .. wie diese einen globalen Filter erstellen in app.js

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

und es in der Komponente verwenden wie üblich

item.price | currency 

Answer 2

Da in Ihrem 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> 

Sie accounting.formatNumber() als this.accounting.formatNumber() denken kann, und die accounting existiert nicht in Ihrem Ansichtsmodell, weder Daten oder Methoden.

Wrap die accounting.formatNumber mit einem Verfahren, in dem Ansichtsmodell oder eine berechnete Eigenschaft verwenden.

Answer 3

Sie auch Dezimalpunkte passieren kann der globale Filter, den ich wirklich praktisch finde.

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

und dann in Ihrer Komponente verwenden

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

Wenn Sie es ursprüngliche Zahl halten wird keine Dezimalwert geben.