2017-11-14 5 views
-2

console.log(e.data) 값을 얻고 있지만 v-for을 사용하여 표시하려고하면 데이터가 표시되지 않습니다. 아무도 정렬 이유를 말해 주실 수 있습니까?기존 vuejs 데이터가 v-for를 사용하여 표시되지 않음

다음은 값

을 표시하는 HTML 코드
<div id="feed12"> 
    <div v-for="row in data"> 
    {{row.bussinessName}} 
    </div> 
</div> 

내 VUE의 JS 코드는 당신이 당신의 selfthis를 할당하는 것을 잊었다 보는 것과

<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> 
+0

'$ ('country') ...'앞에'console.log (location);'을하고 출력을 표시 할 수 있습니까? –

+0

선생님, 저는 json 데이터를 console.log (data)의 – coder

+0

sir으로 업데이트했습니다. 동일한 json 데이터를 얻고 있습니다. 그러나 v-for를 사용하여 표시하지 않습니다. – coder

답변

1

입니다. 다만 이러한 경우 디버깅 오류를 표시해야합니다

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

일반적으로 코드에

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

을 변경합니다. Vue-Devtools를 사용하여 콘솔을 통해 Vue 코드 내의 충돌을 쉽게 찾을 수 있습니다. 크롬 애드온을 사용하고 있습니다. Vue.config.devtools = true이거나 Vue.js의 dev 빌드 (축소 된 버전 아님)를 사용해야합니다.

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