Vue.js get v-for array value in computed

Question

I'm passing user data to a component via Laravel, this data contains a distance in miles, however the user has the option to set the view distance in km, so I have to pass profile.distance_mi to be computed, how do I accomplish this?

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';
                    }
                }
            }
        }
    });

Ohgodwhy · Accepted Answer · 2016-08-06 05:07:11Z

1

A computed property like this won't work in a for loop on a component.

I think the easiest way to achieve what you want to achieve is to make another component. I'm a bit unclear on which properties you're trying to observe and what not, but I think this will get you in the right direction:

Profile Distance Component

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';
      }
    }
  }
})

Of course make sure you use this component inside of your existing saved component

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

Then just pass your profile as a property to your profile-distance component:

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

here's a working jsfiddle

answered Aug 6, 2016 at 5:07

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jofran Over a year ago

The profiles array has a distance_mi key while the user array has a unit key, if the unit is 0, then the user views in KM and it transform miles to KM, there is no distance_mi in the profiles array, I need to do the transformation while iterating the array, that's why I'm using a computed property and passing the unit to the Vue instance, I just need to get the distance in the component and I should be good from there.

Jofran Over a year ago

You were right! It got me on the right track after all! Just had to do a nested component, I'm just learning Vue and it's somewhat complicated, but thank you! Sometimes you need someone to set you in the correct line of though, nested component and data-binding to the parent, duh!

Ohgodwhy Over a year ago

@Jofran Totally understood, I'm completely new to VueJS myself as of about a week ago, but I've ran into a similar problem myself. Glad I could help!

Collectives™ on Stack Overflow

Vue.js get v-for array value in computed

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest