Problem with the same component displayed twice



  • 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>

    0_1507149654077_erro.png

    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>


  • Can you put the code of jquery mask add here ?



  • @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})
          }
        },
    ......


  • 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.




Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.