Can't programmatically change the value with Vuetify about v-money HOT 28 OPEN

I saw a workaround somewhere and the same solution works to Vuetify

https://codepen.io/mukatk/pen/NYZvPW

from v-money.

I made a directive based on v-money that works with Vuetify (v-text-field) and normal inputs.
Note: I made it to work with Brazilian Real (R$) but you can change in the code.

https://github.com/luizhenriquerdias/v-money

from v-money.

While there is no solution, pure Javascript can be used to set the input value and then create an 'Input' event, which is the event that the 'v-model' directive listens to:
domInputElement.value = newValue;
domInputElement.dispatchEvent(new Event('input'));

from v-money.

<v-text-field maxlength="10" v-money="money" ref="productPrice" label="Product price" v-model="productPrice"></v-text-field>
const input = this.$refs.productPrice.$el.querySelector("input");
input.value = "new value";`

this works for me

from v-money.

I'll check it.

from v-money.

I'm having the same problem.

I put v-money inside another component. When I try to programmatically change the value on the v-model of the parent component, the v-money keeps the old value.

[FIXED] I was using a this.$nextTick without need to change the child component value.

from v-money.

Hi!

I did a watch using the @ElizeuBraga solution and it's working very well:

<v-text-field
        ref="valormascarado"
        outlined
        v-model="editedItem.valor"
        v-money="money"
        label="Valor"
></v-text-field>

watch:{
editedItem() {
      let input = this.$refs.valormascarado.$el.querySelector("input");
      input.value = this.editedItem.valor;
    },
}

from v-money.

workaround solution
https://gist.github.com/RodrigoFraga/49cf179c3fdf5c6f775450b613137bd3

from v-money.

hey,
Unfortunately I don't think support will come soon. This repo seems to be abandoned! I decided to upgrade this package to be used with Vue3.

Welcome v-money3!

I'm interested to maintain v-money3 for vue 3 and beyond. Feel free to open this same issue there if you are planning to upgrade your project.

from v-money.

same issue

from v-money.

Same here. Any update?

from v-money.

Same here...

from v-money.

the problem is with v-text-field, with input works good

from v-money.

Same here... but I'm using ElementUI (element.eleme.io)

from v-money.

We are currently in the process of updating all form components for v1.1. If you can fix the codepen to produce the issue, I can verify it against our latest work.

from v-money.

@johnleider What do you mean "If you can fix the codepen to produce the issue"?
The original codepen (https://codepen.io/talski/pen/MOxZXX?editors=1011) produces the issue and doesn't log any console errors.
I have a slight variant of the original code pen that uses an array of prices instead of a single price:
https://codepen.io/paulpv/pen/oqMeXd

from v-money.

I must of been looking at something incorrectly, thanks @paulpv

from v-money.

@johnleider NP; I am certain you are busy!

from v-money.

in my e2e tests with selenium / chromedriver I saw the same issue.
With nightwatch and gebish.
The new value gets appended to the old one.

from v-money.

This plugin breaks reactivity of inputs after adding the v-money parameter. I'm using v-model binded to vuex state.

from v-money.

v-model.lazy doesn't work on components, you have to listen to @change yourself: https://codepen.io/anon/pen/BqmBjb?editors=1010

vuejs/vue#6914

Edit: the mask then breaks after resetting the input, so there's still a bug somewhere

from v-money.

Just one more option :
https://www.npmjs.com/package/v-currency-field

from v-money.

I'm having the same problem.

I put v-money inside another component. When I try to programmatically change the value on the v-model of the parent component, the v-money keeps the old value.

[FIXED] I was using a this.$nextTick without need to change the child component value.

Can you show how to use a this.$nextTick to change v-money value?

from v-money.

Any update on this?

Edit:
For NightwatchJS this seems to be a good approach:
nightwatchjs/nightwatch#1132 (comment)

from v-money.

same here

from v-money.

@kevinfaguiar Your solution work for me I'm using v-money and vuetify

from v-money.

Same problem with bootstrap-vue when i try to extend Money. If i try to set the value programatically then it is restored to previous value.

from v-money.

I can't reset for native input also.
https://jsfiddle.net/nj3cLoum/2/

from v-money.