Cant´t get an element by $('#id') after $update() in Framework7 v6.0.12

Questions
1

Hello everyone, i have a problema with $update().
When i try to get an element by $(’#id’) - after a json call - its value is null, as if it had not been loaded into the DOM. This is my code:
What am I doing wrong? Thanks!

<template>

  <div class="page page-profile" data-name="page-profile">

   

    <!-- NAVBAR -->

    <div class="navbar">

      <div class="navbar-bg"></div>

      <div class="navbar-inner sliding">

        <div class="left">

          <a href="#" class="link icon-only panel-open" data-panel="left">

            <i class="icon material-icons">menu</i>

          </a>

        </div>

        <div class="title">${i18next.t('lblProfile')}</div>

      </div>

    </div>

    <!-- PAGE CONTENT -->

    <div class="page-content">

      ${connectionStatus === 'success' && $h`

        <div class="div-profile-container">

          <!-- Mail -->

          <div>

            <div class="chip chip-mail animate__animated animate__fadeInLeft">

              <div class="chip-media">

                <i class="fas fa-envelope"></i>

              </div>

              <div class="chip-label">${dataProfile.mail}</div>

            </div>

          </div>

          <!-- Teléfono -->

          <div>

            <div class="chip chip-phone animate__animated animate__fadeInLeft">

              <div class="chip-media">

                <i class="fas fa-phone-alt"></i>

              </div>

              <span id="spn-phone-profile" @click="${() => test()}">${dataProfile.phone}</span>

            </div>

          </div>

        </div>

      `}

     

      ${connectionStatus === 'error' && $h`

        <div-error-connection @click="${getProfile}"></div-error-connection>

      `}

    </div> <!-- END PAGE-CONTENT -->

  </div>

</template>

<script>

  import i18next from 'i18next';

  import $ from 'dom7';

  import getLocalJSON from '@/js/services/getLocalJSON';

  import { showDialogLoading, hideDialogLoading } from '@/js/fwk7/dialog';

 

  export default (props, { $f7, $on, $update }) =>

  {

    let connectionStatus = 'loading';

    let dataProfile;

    $on('pageInit', (e, page) =>

    {

      getProfile();

    });

    // Obtengo el perfil del usuario

    function getProfile()

    {

      showDialogLoading();

      getLocalJSON('static/json/page-profile.json')

        .then(data =>

        {

          dataProfile = data;

          connectionStatus = 'success';

          $update();

          hideDialogLoading();

         

          //Set chipPhone the width of chip-mail

          let chipPhone = document.querySelector('.chip-phone');

          chipPhone.style.width = (window.getComputedStyle(document.querySelector('.chip-mail'))).getPropertyValue('width');

        }).catch(error => {

          console.error(error);

          connectionStatus = 'error';

          $update();

          hideDialogLoading();

        });

    }

    return $render;

  };

</script>
2

Hello! … I have already found the problem.
First of all, this explanation from the documentation is important: It is not guaranteed that the DOM changes are applied immediately, so if you rely on DOM (eg need to get HTML content or attribute values after state changed) then pass callback function as argument . (Router Component | Framework7 Documentation)

I share my solution in case someone has the same problem:

      $update(function(){
        let chipPhone = document.querySelector('.chip-phone');
        chipPhone.style.width = (window.getComputedStyle(document.querySelector('.chip-mail'))).getPropertyValue('width');
      }
1 Like