Embedding v-money in other component

[Arwany]

trafficstars

Hi,

I have the following issue:

when I try to capsulate this component in other component, something like:

<template>

    <money :id="id" :name="id" class="form-control" v-model="value" v-bind="format"></money>

</template>

<script>

    import {Money} from 'v-money';

    export default {

        props: {

            id: {
                type: String,
                default: 'control-id'
            },
            value: {
                type: Number,
                default: 0
            },

        },

        data() {
            return {
                val: 0,

                format: {
                    decimal: ',',
                    thousands: '',
                    prefix: '',
                    suffix: '',
                    precision: 0,
                    masked: false
                }

            }
        },

    }
</script>

and try to use it somewhere else like:

import Number from 'components/Number';

...
<Number id="room-count" v-model="roomCount"></Number>

It looks like it works, but of course there is a problem of modifying the props, which is:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

Any idea how to pass the roomCount down to the v-money component and still get it updated back up?

Thank you!

[thedamon]

I've created a localValue mixin for issues like this:

export default {
  props: ['value'],
  computed: {
    localValue: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('input', value);
      }
    }
  }
};

and then use v-model="localValue" in your Number input

You could also perhaps try using it as a directive instead of a component to get around this. Although if this error is coming up from inside v-money, it might not solve the issue

[Arwany]

I will try it, thanks for the answer.