How to use v-money3 with <el-input /> (ElementUI)?

[leeobrum]

Hi, I'm migration my project to vue3 and pinia etc... but don't working v-money3 with my template ElementUI. My old project where I used v-money only, is working. Exemple for error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length')
at B (v-money3.mjs:204:19)
at updated (v-money3.mjs:239:95)
at callWithErrorHandling (runtime-core.esm-bundler.js:157:22)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:21)
at invokeDirectiveHook (runtime-core.esm-bundler.js:2819:13)
at Array. (runtime-core.esm-bundler.js:5380:25)
at flushPostFlushCbs (runtime-core.esm-bundler.js:343:32)
at flushJobs (runtime-core.esm-bundler.js:397:9)
at flushJobs (runtime-core.esm-bundler.js:403:13)

line of code:

<script setup lang="ts"> const maskMoneyParam = reactive({decimal: ',', thousands: '.', prefix: 'R$ ', suffix: '', precision: 2, masked: false }) Main.ts import { Money3Directive } from 'v-money3' const app = createApp(App) app.directive('money3', Money3Directive)

[jonathanpmartins]

What is the version of the Element project that you are using? Element UI was made for Vue2. Element Plus was made for Vue3, same as v-money3. I did not test it, but v-money3 should work fine with Element Plus.
For Element UI you should look to the original v-money project

[leeobrum]

I use element UI plus Vue 3.0 with v-money3. But it doesn't let me use the v-money3="" directive in the tag. I get this error from (reading 'length'). Does it only work with < input />?
In element UI Vue 2.0 I used v-money and it works 100%.

[leeobrum]

[leeobrum]

In the black square the return is only with the use of the input and it works.
In red is using the < el-input / > don't working

[jonathanpmartins]

Oh, now I see! You are using the directive on the <el-input/> component. This will probably not work (I did not test it).

I will suggest you to use the <v-money3/> component.

<money3
   v-model="dbAluguelEmpresa"
   v-bind="maskMoneyParam"
   class="el-input__inner"
/>

You can add the inner class to apply the styles. I think is el-input__inner.

[leeobrum]

Hello, apparently it is not 100% compatible yet. But I can get around this by fixing scss and other necessary stuff. thanks for your help.
very good important this metod v-money3

[hamonCordova]

Same problem with Nuxt UI. I opened a issue on Nuxt UI repository, but the case seems the same as this issue as well.

Nuxt UI Issue

Nuxt UI + v-money3 problem reproduction

I seems to the directive is binding directly with the input wrapper and did no finding the input it self.

@jonathanpmartins could you please take a look? I'd love to see it working

[jonathanpmartins]

I just tested this with element plus. This input styling:

<el-input v-model="form.model"/>

Is equal to this one:

<div class="el-input">
  <div class="el-input__wrapper">
    <money-3-component
      v-model="form.model"
      v-bind="{}"
      class="el-input__inner"
    />
  </div>
</div>

I would suggest to create a custom Money component for your app, register it globally and use it as your money input. Example:

<script setup>
import { Money3Component } from "v-money3";

const props = defineProps({
  config: {
    type: Object,
    default: {
      decimal: ',',
      thousands: '.',
      prefix: 'R$ ',
      suffix: '',
      precision: 2,
      min: Number.MIN_SAFE_INTEGER,
      max: Number.MAX_SAFE_INTEGER,
    },
  },
});

const model = defineModel()

</script>

<template>
  <div class="el-input right">
    <div class="el-input__wrapper">
      <Money3Component
        v-model="model"
        v-bind="props.config"
        class="el-input__inner"
        style="text-align: right"
      />
    </div>
  </div>
</template>

[jonathanpmartins]

@hamonCordova I never ever touch any Nuxt stuff and I don't have any project to test what is going on right now. This project is primarily focused on Vue. If you spend the time and create a repository pointing the problem out, I would love to take a look at it and spend a time to perhaps solve the problem with v-money3.