Vue.js 在计算中获取 v-for 数组值

Question

我通过 Laravel 将用户数据传递给组件，该数据包含以英里为单位的距离，但是用户可以选择以公里为单位设置视图距离，因此我必须通过 profile.distance_mi 来计算，如何我要做到这一点吗？

HTML：

<saved profiles="{{json_encode($profiles)}}" unit="{{Auth::user()->settings->unit}}"></saved>

<div v-for="profile in profiles" class="col-xs-12 col-sm-4 col-md-3">
    ...
    <h4>@{{distance}}</h4>
    ....
</div>

JS

new Vue(
    {
        el: 'body',
        components:
        {
            saved:
            {
                template: '#saved',
                props: ['profiles', 'unit'],
                created: function ()
                {
                    this.profiles = JSON.parse(this.profiles);
                },
                computed:
                {
                    distance: function ()
                    {
                        var unit = this.unit;
                        return unit == 0 ? Math.round(distance * 1.60934) + ' km' : distance + ' miles';
                    }
                }
            }
        }
    });

Answer 1

这样的计算属性在组件的 for 循环中不起作用。

我认为实现你想要实现的最简单的方法是制作另一个组件。我有点不清楚您要观察哪些属性，哪些不是，但我认为这会让您朝着正确的方向前进：

轮廓距离分量

var ProfileDistance = Vue.extend({
  props: ['profile'],
  template: '<span>{{distance}}</span>',
  computed: {
    distance: function() {
      if (this.profile.hasOwnProperty('distance_mi')) {
        return this.profile.distance_mi + ' miles away';
      } else if(this.profile.hasOwnProperty('distance_km')){
        return this.profile.distance_km + ' kilometers away';
      } else {
        return 'Distance N/A';
      }
    }
  }
})

当然，请确保您在现有的 saved 组件中使用此组件

components: {
    //....
    'profile-distance': ProfileDistance
}

然后只需将您的 profile 作为属性传递给您的 profile-distance 组件：

<profile-distance :profile="profile"></profile-distance>

here's a working jsfiddle