Config option (prefix and suffix) sharing information when typing in input inside a v-for

[Carlos-Alexandre-Leutz]

I don't have a solution for the problem but I'll leave the code with the bug below, thanks.

Parent Component

<template>
    <div>
        <div v-for="index in teste" :key="index">         
            <auto-numeric-input
                :ViewModel="ViewModel"
                :atualizaTab="true"
                :config="index"
                @atualizarViewModel="atualizarViewModel"
            ></auto-numeric-input> 
            type  a string in input
        </div>

    </div>
</template>

import AutoNumericInput from "./AutoNumericInput.vue";
import { ref } from "vue";
export default {
    components: {
        AutoNumericInput,
    },
    setup() {
        let ViewModel = ref(0);
        let teste = [
            {
                masked: false,
                prefix: "",
                suffix: "#",
                thousands: ",",
                decimal: ".",
                precision: 2,
                disableNegative: false,
                disabled: false,
                min: null,
                max: null,
                allowBlank: false,
                minimumNumberOfCharacters: 0,
            },
            {
                masked: false,
                prefix: "R$",
                suffix: "",
                thousands: ",",
                decimal: ".",
                precision: 2,
                disableNegative: false,
                disabled: false,
                min: null,
                max: null,
                allowBlank: false,
                minimumNumberOfCharacters: 0,
            },
            {
                masked: false,
                prefix: "",
                suffix: "%",
                thousands: ",",
                decimal: ".",
                precision: 2,
                disableNegative: false,
                disabled: false,
                min: null,
                max: null,
                allowBlank: false,
                minimumNumberOfCharacters: 0,
            },
            {
                masked: false,
                prefix: "",
                suffix: "º",
                thousands: ",",
                decimal: ".",
                precision: 2,
                disableNegative: false,
                disabled: false,
                min: null,
                max: null,
                allowBlank: false,
                minimumNumberOfCharacters: 0,
            },
        ];

        let config = ref({
            masked: false,
            prefix: "",
            suffix: "#",
            thousands: ",",
            decimal: ".",
            precision: 2,
            disableNegative: false,
            disabled: false,
            min: null,
            max: null,
            allowBlank: false,
            minimumNumberOfCharacters: 0,
        });
        const atualizarViewModel = (e) => {
            ViewModel.value = e;
        };
        return {
            ViewModel,
            atualizarViewModel,
            config,
            teste,
        };
    },
};

Child Component

<template>
    <money3 v-model="valueInput" @blur="atualizaBlur" v-bind="config"></money3>
</template>

import { Money3Component } from "v-money3";
import { watch, ref } from "vue";

export default {
    components: { money3: Money3Component },
    props: {
        ViewModel: {
            type: [String, Number],
            required: false,
            default: 0,
        },
        atualizaTab: {
            type: Boolean,
            required: false,
            default: false,
        },
        config: {
            type: Object,
            required: true,
            default() {
                return {
                    masked: false,
                    prefix: "$", //$
                    suffix: "#", //#
                    thousands: ",",
                    decimal: ".",
                    precision: 2,
                    disableNegative: false,
                    disabled: false,
                    min: null,
                    max: null,
                    allowBlank: false,
                    minimumNumberOfCharacters: 0,
                };
            },
        },
    },
    emits: ["atualizarViewModel"],
    setup(props, context) {
        let valueInput = ref(0);

        const atualizaBlur = () => {
            if (props.atualizaTab) {
                context.emit("atualizarViewModel", valueInput.value);
            }
        };
        if (!props.atualizaTab) {
            watch(valueInput, () => {
                context.emit("atualizarViewModel", valueInput.value);
            });
        }
        watch(props, () => {
            valueInput.value = props.ViewModel;
        });
        return {
            valueInput,
            atualizaBlur,
        };
    },
};

[jonathanpmartins]

It would be much better to track the problem if I had a working CodeSandbox

[Carlos-Alexandre-Leutz]

ok, I made a repository to demonstrate better => https://github.com/Carlos-Alexandre-Leutz/v-money-error-

[jonathanpmartins]

ok, I made a repository to demonstrate better => https://github.com/Carlos-Alexandre-Leutz/v-money-error-

The link above leads to a 404 page.

[Carlos-Alexandre-Leutz]

try now https://github.com/Carlos-Alexandre-Leutz/v-money-error-

[jonathanpmartins]

I just fork the project. What are you trying to accomplish? Prefix and Suffix did no change in my tests... They are all set as you config then, and did no change when typed.

I did probably not understand your problem.

Can you create a video or a step by step to get to the problem? Something like: - What is happening... And what you expect to be happening. Thanks

[Carlos-Alexandre-Leutz]

vmoney.zip

[Carlos-Alexandre-Leutz]

Ok I sent a video with the behavior. the error is: when I create multiple inputs inside a v-for and type a string into the input the prefix and suffix changes. when I type a number it doesn't change

[jonathanpmartins]

Got it! Perfect... let the bug hunting begin!

[jonathanpmartins]

Thank you very much for your patience and the willingness to help find the problem!

Solved in 3.20.1!