CODEWITHSUNDEEP
vue.js
gileneusz
gileneusz

Reputation: 1485

vuejs binding items dynamically

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?

Upvotes: 0

Views: 661

Answers (1)

willia_am
willia_am

Reputation: 188

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>

Upvotes: 1

Related Questions