Vuejs2 Update of Directives

Question

Vuejs2 Update of Directives

Asked 6 years, 8 months ago

Viewed 111 times

0

I have a problem with my Money directive, it works like this: I make an Axios call to my API, the API brings me a value and I format to the BR standard. But now I have to create a button atualizarthat is bringing me this formatting problem. Can anyone make it work please?

It is expected that when you click the button getNewValue, the value test be updated and formatted correctly

Jsfiddle: HERE

HTML

<div id="app">
<span v-money>{{test}}</span>
<button @click="getNewValue()">Get New Value</button>
</div>

JS

    const formatNumber = (el) => {

   let valorFinal = el.innerHTML;

   if(valorFinal.includes(',')) valorFinal = valorFinal.replace(/\./g, "").replace(',','.'); 

   el.innerHTML = parseFloat(valorFinal).toLocaleString('pt-BR', {minimumFractionDigits: 2,maximumFractionDigits: 2});
};

Vue.directive('money', {
   inserted: function (el) {
      let waitingAPI = setInterval(function () {
         if (el.innerHTML != null && el.innerHTML != '') {
            clearInterval(waitingAPI);
            formatNumber(el);
         }
      }, 300);
   },
   update(el){
       formatNumber(el);
   }
})

const demo = new Vue({
  el: '#app',

  data:{
    test: 10.25
  },
  methods:{
    getNewValue(){
      setTimeout( () => {
        alert('Response Success API!')
        this.test = 1300.25
      },1000)
    }
  }

});

Thanks in advance :)

A doubt necessarily should be a span with the v-money directive? Or could it be an input? I’m not exactly sure I understand the problem, but I believe that altering would solve, I can also try to explain what I think is happening between the expected result and what is occurring.

– guastallaigor

2018/04/02 at 21:56
It must necessarily be span with v-money directive, exactly as it is in the code. In this case it would be a Price Details screen. It’s not an input. From what I’ve seen is that after I give it innerHTML, it apparently loses its reactivity... This button getNewValue would be a simulation of a get in the API bringing a new bank value to that price. I don’t know how to resolve this ( formatting ) =/

– Jackson

2018/04/03 at 11:41
It would no longer be appropriate to use a filter?

– Tobias Mesquita

2018/04/03 at 14:04

1 answer

Browser other questions tagged vue.js vue.js-2

You are not signed in. Login or sign up in order to post.

by Tobias Mesquita • **22,900** points · Answer 1 · 2018-04-03T14:18:43+00:00

try setting the value to be formatted as the directive value.

var intl = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' })
Vue.directive('money', {
  bind: function (el, binding) {
    el.innerHTML = intl.format(binding.value)
  },
  update: function (el, binding) {
    el.innerHTML = intl.format(binding.value)
  }
})

new Vue({
  el: "#app",
  data: function () {
    return {
      valor: 10.25
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <label>
    Valor:
    <input type="text" v-model="valor" />
  </label>
  <span v-money="valor"></span>
</div>

however, based on your example, I believe that a filter is more appropriate

var intl = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' })
Vue.filter('money', function (value) {
  return intl.format(value)
})

new Vue({
  el: "#app",
  data: function () {
    return {
      valor: 10.25
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <label>
    Valor:
    <input type="text" v-model="valor" />
  </label>
  <span>{{valor | money}}</span>
</div>