JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://rawgit.com/vuejs-tips/v-money/master/dist/v-money.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.2.14/spectre.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/locales/pt-br.min.js"></script>
<div id="app" class="empty">
  <h1>
    V-Money como Diretiva e NumeralJS para converter string em numero e vice/versa
  </h1>
  <input v-model="price" v-money="money" class="form-input input-lg" style="text-align: right" /> {{price}}
  <span>PrinceNumber: {{priceNumber}}</span>
  <button @click="add10">Adicionar 10 ao valor</button>
</div>

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
      price: 123.45,
      money: {
        decimal: ',',
        thousands: '.',
        prefix: 'R$ ',
        precision: 2,
        masked: false /* doesn't work with directive */
      }
    }
  },
  methods: {
    add10() {
     let priceNumber = numeral(this.price).value()
     console.log('prceNumber', priceNumber)
     this.price = numeral(priceNumber + 10.0).format('R$ 0,0.00')
    }
  },
  computed: {
    priceNumber() {
      console.log(this.price)
      return numeral(this.price).value()
    }
  },
  created () {
   numeral.locale('pt-br')
  }
})