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

Question

我有一个单独事件的多维 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();  }

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