Can't programmatically change the value with Vuetify

[talski]

When using with Vuetify, I can't reset the model value

https://codepen.io/talski/pen/MOxZXX?editors=1010

[neves]

I'll check it.

[lchhieu]

same issue

[evandroabukamel]

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.

[luizhenriquerdias]

Same here. Any update?

[rafaellarrosa]

Same here...

[rafaellarrosa]

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

[kevinfaveri]

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

[kevinfaveri]

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'));

[johnleider]

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.

[paulpv]

@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

[johnleider]

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

[paulpv]

@johnleider NP; I am certain you are busy!

[mukatk]

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

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

[luizhenriquerdias]

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

[MartinX3]

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.

[averied]

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

[KaelWD]

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

[luizrobertomeier]

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

[Nerossoul]

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?

[MartinX3]

Any update on this?

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

[danielorkae]

same here

[valterbarros]

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

[RodrigoFraga]

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

[yvescavalcanti]

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.

[ElizeuBraga]

<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

[Adrug]

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

[jonathanpmartins]

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.

[1985michel]

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