Nuxt - Can't get element by ref after initial fetch

Question

I'm trying to initialize my gmaps autocomplete fields but, they are conditionaly showned

If user.enterprise is true, so I show theses inputs. But I get "InvalidValueError: not an instance of HTMLInputElement"

My input:

          <input
            v-if="userInfo.entreprise"
            ref="adresse_principale"
            type="text"
            autocomplete="new-password"
            onfocus="this.setAttribute('autocomplete', 'new-password')"
            :value="userInfo.entreprise.adressePrincipale.adresse + ' ' + userInfo.entreprise.adressePrincipale.cp + ' ' + userInfo.entreprise.adressePrincipale.ville"
          >

The fetch method

  async fetch () {
    const data = await this.$axios({ url: 'infos-utilisateur', method: 'GET' })
    this.userInfo = data.data
  },

And the mounted method:

mounted () {
    const adresseEntreprise = this.$refs.adresse_principale
    const options = {
      componentRestrictions: { country: 'fr' },
      fields: ['address_components', 'geometry', 'icon', 'name'],
      strictBounds: false,
      types: ['address']
    }

    const vm = this

    const adresseEntrepriseAutocomplete = new window.google.maps.places.Autocomplete(adresseEntreprise, options)

    window.google.maps.event.addListener(adresseEntrepriseAutocomplete, 'place_changed', function () {
      const place = adresseEntrepriseAutocomplete.getPlace()

      if (place.geometry) {
        const address = place.address_components
        const streetNumber = address.find(a => a.types.includes('street_number')) ? address.find(a => a.types.includes('street_number')).long_name + ' ' : ''

        vm.userInfo.entreprise.adressePrincipale = {
          adresse: streetNumber + address.find(a => a.types.includes('route')).long_name,
          ville: address.find(a => a.types.includes('locality')).long_name,
          cp: address.find(a => a.types.includes('postal_code')).long_name,
          geometry: place.geometry
        }
      }
    })
  },

It looks like I can't get the element when mounted is is executed because the v-if is not trigered yet...

Does anyone have an idea?

I'm running NuxtJS 2.15.8 (vue2)

Answer 1

This should do it pretty well (moving the code in mounted() to fetch() to be sure that everything is properly fetched + populated before trying to access it.

<script>
export default {
  async fetch() {
    const data = await this.$axios({ url: 'infos-utilisateur', method: 'GET' })
    this.userInfo = data.data

    const adresseEntreprise = this.$refs.adresse_principale
    const options = {
      componentRestrictions: { country: 'fr' },
      fields: ['address_components', 'geometry', 'icon', 'name'],
      strictBounds: false,
      types: ['address'],
    }

    const vm = this

    const adresseEntrepriseAutocomplete =
      new window.google.maps.places.Autocomplete(adresseEntreprise, options)

    window.google.maps.event.addListener(
      adresseEntrepriseAutocomplete,
      'place_changed',
      function () {
        const place = adresseEntrepriseAutocomplete.getPlace()

        if (place.geometry) {
          const address = place.address_components
          const streetNumber = address.find((a) =>
            a.types.includes('street_number')
          )
            ? address.find((a) => a.types.includes('street_number')).long_name +
            ' '
            : ''

          vm.userInfo.entreprise.adressePrincipale = {
            adresse:
              streetNumber +
              address.find((a) => a.types.includes('route')).long_name,
            ville: address.find((a) => a.types.includes('locality')).long_name,
            cp: address.find((a) => a.types.includes('postal_code')).long_name,
            geometry: place.geometry,
          }
        }
      }
    )
  },
}
</script>

---

Also, you could use this handy helper too: v-if="!$fetchState.pending" rather than v-if="userInfo.entreprise" as shown here: https://nuxtjs.org/docs/features/data-fetching#accessing-the-fetch-state