CODEWITHSUNDEEP
javascriptvue.js
gileneusz
gileneusz

Reputation: 1485

vuejs using v-model dynamically

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

<v-select
v-model="items.physicianSpeciality"
>
</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 use v-model items.physicianSpeciality For nurse I want to use v-model items.nurseSpeciality, etc.

I tried to make something like:

<v-select
v-model="this['items.' + offer.person + 'Speciality']"
>
</v-select>

but this gives me an error: 

[Vue warn]: Property or method "items.physicianSpeciality" 
is not defined on the instance but referenced during render. 
Make sure that this property is reactive, either in the data option, 
or for class-based components, by initializing the property.

while this works:

<v-select
v-model="items.physicianSpeciality"
>
</v-select>

What is wrong here? How should correct my code to make this work?

Upvotes: 0

Views: 211

Answers (1)

xianshenglu
xianshenglu

Reputation: 5309

change 

v-model="this['items.' + offer.person + 'Speciality']"

to 

v-model="items[offer.person + 'Speciality']"

Upvotes: 1

Related Questions