2017-11-14 3 views
-2

console.log(e.data)値を取得していますが、v-forを使用して表示しようとすると、データが表示されません。誰も私がなぜこれが起こっているか教えてください。既存のvuejsデータがv-forを使用して表示されない

次は

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

マイVUEのJSコードを値を表示するためのHTMLコードでは、私はあなたがあなたの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データをコード – coder

+0

sirのconsole.log(data)で更新しています。同じ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

関連する問題