现有的 vuejs 数据未使用 v-for [重复] 显示答案

【问题标题】：existing vuejs data not displaying using v-for [duplicate]现有的 vuejs 数据未使用 v-for [重复] 显示
【发布时间】：2018-04-27 10:06:29
【问题描述】：

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

【问题讨论】：

你能在$('#country')... 之前做console.log(location); 并在此处显示输出吗？
先生，我正在获取代码中更新的 json 数据
先生，在 console.log(data).. 我得到相同的 json 数据.. 但是通过使用 v-for，它没有显示

标签： javascript vue.js vue-component

【解决方案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.

【讨论】：