Help about rawValue Option

[JohnniePeixoto]

Hi, is there an option like 'rawValue' on the component? If not it would be great!

Somehing that can show the mask on input but take from the variable prefix, sufix, etc.. let it with just the digits..

[jonathanpmartins]

This is how the component works. The mask will be displayed in the input, but the model value will be a raw float or integer. Perhaps I did not understand your issue. What are the version that you are working on? Can you give me an example of what you are trying to accomplish?

[JohnniePeixoto]

I'm using v3.14.0, that's weird because my variables are being sent to backend like this img (exactly as it is displayed on the input)

I use money3 as component and with this config

config: {
        decimal: ",",
        thousands: ".",
        prefix: this.money ? "R$ " : "",
        suffix: "",
        precision: 2,
        masked: true
}

[JohnniePeixoto]

Maybe the problem is because I use money3 inside a component using the value with v-model, emitting an event to make two-way data binding still work ... as it says here in the documentation https://v3.vuejs.org/guide/component-basics.html#using-v-model-on-components

I'm not that experient with vue, so, it can be something dumb from mine too.. thanks in advance for the help!

[jonathanpmartins]

Are you using the component or the directive? If you are using directive, there is a bug related to this in 3.14.0 version. Please upgrade to 3.14.1

[JohnniePeixoto]

Are you using the component or the directive? If you are using directive, there is a bug in this version. Please upgrade to 3.14.1

I'm using the component, but anyway i'll upgrade.

[jonathanpmartins]

sorry... 3.14.2

[jonathanpmartins]

@JohnniePeixoto Oh, I'm sorry! Now I see the problem... you should set masked to false! Take a look at the example page: https://jonathanpmartins.github.io/v-money3/example/index.html

Set that "Masked? (only component)" option to true and you will see whats happening.

[JohnniePeixoto]

Yes, for my purpose I need to use masked: false. Even setting it to false, the prefix was being sent, but, I've figured out what is the problem here. As I'm using custom component with v-model and the event 'update:model-value' to propagate the value change, the mistake was the parameter..

Look this: @input="$emit('update:model-value', $event.target.value)" I was sending the DOM input value (with prefix sufix etc..) and not the variable returned by the component money3..

Now I have another problem :| If i use as parameter the variable of v-model like @input="$emit('update:model-value', modelValue)" it sends a one step old value, see the imgs..

[jonathanpmartins]

Could you please post the complete code of your component? Will be easier to help. A "codesandbox" would be even better: https://codesandbox.io/

[JohnniePeixoto]

Yes, here it is I noticed that Vue complains about mutating the prop directly, but then I tried using a local data variable and emitting the change to the parent but the result was the same..

[jonathanpmartins]

Nice! With an example like that it's much easier to help. Take a look at my fork.

Inside the App.vue file I set the obj.value to 1. That can represent a value that came from the database. It will be passed down via the v-model directive.

data() {
  return {
    obj: {
      value: 1,
    },
  };
},

Inside the HelloWorld component I added a created hook to catch the first/default value and instantiate it correctly. I added two more watchers to manage the changes made in the new model variable and on the modelValue property.

data() {
  return {
    model: 0,
  },
},
created() {
  this.model = this.modelValue;
},
watch: {
  modelValue(val) {
    this.model = val;
  },
  model(val) {
    this.$emit("update:modelValue", val);
  },
},

Remove the input event listener from the component and you are good to go.

<money3 v-bind="config" v-model="model" />

The changes made in v-money3 will be cascade up by the $emit function triggered inside the model watcher. And the changes made in the modelValue property will be cascade down via the modelValue watcher.

Hope it helps!

[JohnniePeixoto]

Man, thanks a lot!!