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

Vue.js get v-for array value in computed

本文关键字：v-for 数组 获取 js computed Vue      更新时间：2023-09-26

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

像这样的计算属性在组件的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>

这是一个正在工作的jsfiddle

相关文章：