Problem with the same component displayed twice

[tonpereira]

Hello, my name is Everton!
I’m having a problem, I’m developing a project, in which I use the same component two in the same .vue file
In this component that was created, I put a mask in a field by jquery.
In the second view of the component the mask does not work in the field, only in the first view.
I’ll leave a photo and part of the code here to see if they can help me!

the problem is the field # of the CPF that appears in the component shown above and below, are the same components but the top is masked and the bottom does not apply the mask

the component is the <form-cadastro></form-cadastro>

https://pastebin.com/raw/FwradFpJ

<script>
import FormCadastro from '../../components/formCadastro/formCadastro.vue'

export default {
  data () {
    return {
      progress: 40,
      checked: false,
      disable: {
        check: true
      }
    }
  },
  components: { FormCadastro },
....
</script>

<template>
....
<div id="interessado">
      <h4 class="text-primary titleGeral">Identificação do Interessado</h4>
      <hr />
      <form-cadastro></form-cadastro>
    </div>
    <div>
      <q-checkbox v-model="checked" label="Informar representante legal caso o interessado não possa comparecer" 			:disable="disable.check"/>
    </div>
    <div id="representante" v-show="checked === true">
      <h4 class="text-primary titleGeral">Identificação do Representante Legal do interessado</h4>
      <hr />
      <form-cadastro></form-cadastro>
...
</template>

[leon]

Can you put the code of jquery mask add here ?

[tonpereira]

@leon

Hello, I use this plugin in jquery to make the mask,

of the change of my first field I check what kind of document that was selected and apply the mask for that type of document in the next field.

https://igorescobar.github.io/jQuery-Mask-Plugin/

...
methods: {
    TPO_DOC () {
      if (this.TIPODOCTO === 'Selecione') {
        this.labelNdoc = 'N° do *'
        this.cpfcnpj = ''
        this.nomecompleto = ''
        this.formValid.UserEncontrado = ''
        this.formValid.userValido = ''
        this.disable.cpfcnpj = true
      }
      if (this.TIPODOCTO === 'CPF') {
        this.labelNdoc = 'N° do CPF *'
        this.disable.cpfcnpj = false
        this.maxlength = 14
        $('#cpfcnpj :input').mask('000.000.000-00', {reverse: false})
      }
      if (this.TIPODOCTO === 'CNPJ') {
        this.labelNdoc = 'N° do CNPJ *'
        this.disable.cpfcnpj = false
        this.maxlength = 18
        $('#cpfcnpj :input').mask('00.000.000/0000-00', {reverse: false})
      }
    },
......

[leon]

3 Suggestions

• CamelCase method name wiki camel case doc / Vue doc
  tipoDoc instaed of TPO_DOC

• The way you are haldling your logic can be done whit computeds. Read this vue doc

• And your mask question probaly is because you are using ID, if you use a class instead will probaly work.
  BTW, you can use computed and a pure JS lib to solve it too whitout jquery.

[leon]

Here https://codesandbox.io/s/8qn593m20

[tonpereira]

I got it sorted, thanks!