如何将计算值推送到多维 JSON 对象并对父子对象进行排序 Vue.JS答案

【问题标题】：How to Push Calculated Value to Multidimensional JSON Object and Sort Parent and Child Objects Vue.JS如何将计算值推送到多维 JSON 对象并对父子对象进行排序 Vue.JS
【发布时间】：2019-05-16 18:39:31
【问题描述】：

我有一个包含多个不同日期和地点的单个事件的多维 JSON 提要。所述事件中的每个日期都包括纬度和经度，我使用 HTML5 地理位置计算距离。我想将该距离推入子对象，不仅按距离排序，还按每个日期的距离对事件进行排序。

我尝试过使用 v-for 进行内联排序，但后来我了解到这在 vue2 中不起作用，也不能解决对父事件进行排序的问题。我在下面提供了一个我正在处理的示例：

HTML：

<div id="string">
  <p><strong>Current Geolocation:</strong> {{lat}}:{{lon}}</p>
  <ol v-for="seminar in seminars">
    <li>
      {{seminar.title}}
      <ul>
        <li v-for="event in seminar.events">
          {{event.webtitle}} <strong>{{calcDist(lat,lon,event.location.lat,event.location.lon,N)}} Miles Away</strong>
        </li>
      </ul>
    </li>
  </ol>
</div>

方法：

methods: {
    getLocation: function () {      
      if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(this.showPosition, this.errorCallback);
      } else {
        this.error = "Geolocation is not supported.";
      }
    },
    showPosition: function (position) { 
      this.lat = position.coords.latitude;
      this.lon = position.coords.longitude;
      this.googleQuery(position.coords.latitude, position.coords.longitude);
    },
    calcDist: function (lat1, lon1, lat2, lon2, unit) {
      if ((lat1 == lat2) && (lon1 == lon2)) {
        return 0;
      } else {
        var radlat1 = Math.PI * lat1/180;
        var radlat2 = Math.PI * lat2/180;
        var theta = lon1-lon2;
        var radtheta = Math.PI * theta/180;
        var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
        if (dist > 1) {
          dist = 1;
        }
        dist = Math.acos(dist);
        dist = dist * 180/Math.PI;
        dist = dist * 60 * 1.1515;
        if (unit=="K") { dist = dist * 1.609344 }
        if (unit=="N") { dist = dist * 0.8684 }
        return Math.round(dist);
      }
    }
  },
  beforeMount() {
    this.getLocation();
  }

JSFiddle Example with Data Structure and Current Progress

【问题讨论】：

标签： javascript json vue.js multidimensional-array vuejs2

【解决方案1】：

这似乎是计算属性的完美用例。我不太明白这个问题的一些细节（例如，在什么基础上对研讨会进行分类？）但下面的一般方法应该有效。为了清楚起见，它使用了多个计算属性，但如果需要，它们可以组合起来。

computed: {
    seminarsWithDistance() {
        return this.seminars.forEach(seminar => {
            seminar.events.forEach(event => {
                event.distance = calcDist(/*...*/);
            });
        });
    },
    seminarsWithSortedEvents() {
        return this.seminarsWithDistance.forEach(seminar => {
            seminar.events.sort((a, b) => a.distance - b.distance);
        });
    },
    sortedSeminars() {
        return this.seminarsWithSortedEvents.sort((a, b) => {
            /* some compare function for two seminars a and b */
        });
    }
}

那么在模板中使用计算属性就可以了

<ol v-for="seminar in sortedSeminars">

【讨论】：