vue 3.0 can mount multiple elements used class name?-CodePudding

i want make formatted text input like below:

<input type="text"  v-model="numberModel">
...

and mount vue that elements:

const numberInput = {
    computed: {
        numberModel: {
            get: function() {
                return new Intl.NumberFormat().format(this.value);
            },
            set: function(n) {
                this.value = parseInt(n.replaceAll(",", ""));
            }
        }
    },
    data: function() {
        return {
            value: ""
        }
    }
}
Vue.createApp(numberInput).mount(".number-format");

but it mounted only first element of .number-format. i want make vue root app like component(but, it is not component).

<number-format-input ........> (x)
<input type="text" ....> (o)

any possible solutions?

CodePudding user response：

mount() expects its argument to resolve to a single DOM node. It can be either the DOM node itself or a CSS selector - but if multiple nodes match the CSS selector, only the first node will be replaced with the generated Vue instance.

You will need to first register a global Vue component - and then use that component in your template, presumably with v-for directive to define multiple instances of that component.