如何将计算值推送到多维 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: {&nbsp; &nbsp; seminarsWithDistance() {&nbsp; &nbsp; &nbsp; &nbsp; return this.seminars.forEach(seminar => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; seminar.events.forEach(event => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; event.distance = calcDist(/*...*/);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; },&nbsp; &nbsp; seminarsWithSortedEvents() {&nbsp; &nbsp; &nbsp; &nbsp; return this.seminarsWithDistance.forEach(seminar => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; seminar.events.sort((a, b) => a.distance - b.distance);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; },&nbsp; &nbsp; sortedSeminars() {&nbsp; &nbsp; &nbsp; &nbsp; return this.seminarsWithSortedEvents.sort((a, b) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* some compare function for two seminars a and b */&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }}那么这只是在模板中使用计算属性的问题<ol v-for="seminar in sortedSeminars">