existing vuejs data not displaying using v-for

Question

In console.log(e.data) I am getting values, but when I try to display using v-for the data is not displaying. Can anybody please sort tell me why this is happening?

The following is the HTML code to display values

<div id="feed12">
  <div v-for="row in data">
    {{row.bussinessName}}
  </div>
</div>

My vue js code is

<script type="text/javascript">
  new Vue({ 
    el: '#feed12' , 
    data: { 
      data: {}, 
    }, 
    mounted() { 
      navigator.geolocation.getCurrentPosition(success, error);
      function success(position) {
        var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=en';
        $.getJSON(GEOCODING).done(function(location) {
        $('#country').html(location.results[0].address_components[5].long_name);
          $('#state').html(location.results[0].address_components[4].long_name);
          $('#city').html(location.results[0].address_components[2].long_name);
          $('#address').html(location.results[0].formatted_address);
          $('#latitude').html(position.coords.latitude);
          $('#longitude').html(position.coords.longitude);
        })

        var lat = position.coords.latitude;
        $.ajax({
          url: 'https://n2s.herokuapp.com/api/post/filter/',
          data: {
            lat: position.coords.latitude,
            lon: position.coords.longitude,
          },
          type: "POST",
          dataType: 'json',
          success: function (e) { 
            if (e.status == 1) { 
              self.data = e.data; 
              console.log(e.data) 
            }
          }
        });
        console.log(lat);
      }

      function error(err) {
        console.log(err)
      }
    }
  })
</script>

Can you do `console.log(location);` before `$('#country')...` and show output here? — dkasipovic, Nov 14 '17 at 12:45
sir, in console.log(data).. I am getting the same json data.. but by using v-for,, it is not displaying — coder, Nov 14 '17 at 12:55

score 1 · Accepted Answer · answered Nov 14 '17 at 13:00

From what I see you forgot to assign your self to this. Just change

mounted() { 
  navigator.geolocation.getCurrentPosition(success, error);

to

mounted() { 
  var self = this;
  navigator.geolocation.getCurrentPosition(success, error);

Normally your code should show an error in debugging in such a case. You can use Vue-Devtools to find conflicts within your Vue code easily through the console. I am using the chrome addon. Make sure to have Vue.config.devtools = true or use the dev build of Vue.js (not the minified version).

https://github.com/vuejs/vue-devtools.

existing vuejs data not displaying using v-for

1 Answers1