Question

在console.log(e.data)我正在获取值，但当我尝试使用v-for显示时，数据未显示。请问有人可以告诉我为什么会这样吗？

以下是显示值的HTML代码

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

我的vue js代码是

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

Answer 1

从我看到您忘记将self分配给this。只需改变

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

到

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

通常，在这种情况下，您的代码应该在调试时显示错误。您可以使用Vue-Devtools通过控制台轻松查找Vue代码中的冲突。我正在使用chrome插件。确保拥有Vue.config.devtools = true或使用Vue.js的开发版（不是缩小版）。

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

现有的vuejs数据不使用v-for显示

1 个答案: