Question

我通过Laravel将用户数据传递给组件，此数据包含以英里为单位的距离，但是用户可以选择以km为单位设置视图距离，因此我必须通过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

Vue.js在计算中得到v-for数组值

1 个答案: