CODEWITHSUNDEEP
javascriptvue.jsvuejs2
t56k
t56k

Reputation: 6981

Vue: standard way to hide template if no data or loading

I've got a Vue component for Google Maps that looks like this:

Vue.component('user-map', {
  template: '<div class="hidden-xs hidden-sm hidden-md col-lg-8"> \
    <gmap-map style="width: 630px; height: 200px" :center="coords" :zoom="13"> \
      <gmap-marker :position="coords"></gmap-marker> \
    </gmap-map> \
  </div>',
  data: function () {
    return {
      coords: {}
    }
  },
  mounted() {
    this.getCoords(window._client_code)
  },
  methods: {
    getCoords: function (clientCode) {
      this.$http.get(`${window.location.origin}/share/${clientCode}/map`)
          .then(response => {
        this.coords = response.body[0]
      }, response => {
        console.log('no coords')
      })
    }
  },
  computed: {
    finalLat: function() {
      return this.coords.lat
    },
    finalLng: function() {
      return this.coords.lng
    }
  }
})

How can I hide the template while it's loading the JSON response or if the response is null?

Upvotes: 0

Views: 1138

Answers (1)

user9456025
user9456025

Reputation:

You can have a data field that gets set true/false on loading success, and v-show or v-if off that on <gmap-map />. I want to say most of the Vue UI frameworks I've seen just use a variable or computed that's true or false (Element uses 'loading')

Upvotes: 1

Related Questions