vuejs binding items dynamically

Question

I've got basic select that I want bind to array. I use vuetify, but this problem is universal.

<v-select
v-bind:items="physicianListSpeciality"
>
</v-select>

now I want to use the same select to many arrays, depend on offer.person value that could be physician, nurse etc.

data: {
offer.person: "physician" //or offer.person: "nurse"
}

For example for physician I want to bind physicianListSpeciality For nurse I want to bind nurseListSpeciality, etc.

I tried to make something like:

<v-select
v-bind:items="`${offer.person}`ListSpeciality"
>
</v-select>

or

v-bind:items="[offer.person +'ListSpeciality']"

none of them seems to work for me. How should correct my code to make this work? Should I use some kind of computed or there is another way to do it?

@samayo this gives [Vue warn]: Invalid prop: type check failed for prop "items". Expected Array, got String. — gileneusz
– gileneusz, Commented Apr 8, 2018 at 8:58

willia_am · Accepted Answer · 2018-04-08 09:09:10Z

1

Well, it depends what scope you're. If you're working in the window scope, you would just call the var using window[offer.person + 'ListSpeciality'].

If we're in the component scope, and the getters / data 'nurseListSpeciality' exists then you could call it from the this context like so: this[offer.person + 'ListSpeciality'] where offer.person would be 'nurse'.

Another alternative would be to do something like that: Taking your example with your item's data

data() {
  return {
    jobs: {
      nurse: [
        'nurse item A',
        'nurse item B',
        'nurse item C',
      ],
      physician: [
        'physician item A',
        'physician item B',
        'physician item C',
      ],
    },
  };
}

Then you could just get the items like so:

// offer.person = 'nurse';
<v-select
  :items="jobs[offer.person]"
>
</v-select>

edited Apr 8, 2018 at 9:09

answered Apr 8, 2018 at 9:03

willia_am

1887 bronze badges

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

3 Comments

gileneusz Over a year ago

I've doing spa. This should work, but I don't want to make changes of my array, beacuse they are arrays of objects and are used many times in my app already. My intention was to make simply change into :items prop

gileneusz Over a year ago

solution with this.[offer.person + 'ListSpeciality'] works for me! Thank you for help

willia_am Over a year ago

@gileneusz Alright, then as in my edited answer, you could simply call this[offer.person + 'ListSpeciality']since just passing the string concatenation wont work. You need to call the variable to bind the array in the :items property.

Collectives™ on Stack Overflow

vuejs binding items dynamically

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

Related