CODEWITHSUNDEEP
vue.jsvue-componentnested-objectvue-multiselectobject-properties
Newbie
Newbie

Reputation: 31

Vue multiselect component's label can't read nested property

I have a data structure like this:

Proxy(Array) {
  0: { id: 1, machineries_ID: 2, machinery: { id: 2, en_name: 'Digital MRI', pa_name: 'ډیجیټل ام ار ای', model_no: '2022', company_id: 1, ... } },
  1: { id: 2, machineries_ID: 2, machinery: { id: 3, en_name: 'Another Machine', pa_name: 'ډیجیټل ام ار ای', model_no: '2022', company_id: 1, ... } },
  2: { id: 3, machineries_ID: 2, machinery: { id: 4, en_name: 'Yet Another Machine', pa_name: 'ډیجیټل ام ار ای', model_no: '2022', company_id: 1, ... } },
}

I want to pass the en_name property of machinery property as label:

    const label = computed(() => {
    return Lang.getLocale() === 'en' ? machinery.en_name : 'N/A';
});

<multiselect
        :loading="isLoading"
        v-model="selectedOption"
        @select="handleChange"
        :options="options"
        :placeholder="Lang.get('lang.Machineries')"
        track-by="id"
        :showLabels="false"
        :allow-empty="false"
        :label="label"
    >
    <span slot="noResult">Oops! No elements found. Consider changing the search query.</span>
</multiselect>

The dropdown options are empty, but if I pass a property which is not nested like machineries_ID it works just fine.

Upvotes: 0

Views: 85

Answers (1)

moon
moon

Reputation: 1132

You cant dynamically use label, but you can change your data structure to fit the component(multiselect)

const dataSource = [{ id: 1, machineries_ID: 2, machinery: { id: 2, en_name: 'Digital MRI', pa_name: 'ډیجیټل ام ار ای', model_no: '2022', company_id: 1, } },
        { id: 2, machineries_ID: 2, machinery: { id: 3, en_name: 'Another Machine', pa_name: 'ډیجیټل ام ار ای', model_no: '2022', company_id: 1, } },
        { id: 3, machineries_ID: 2, machinery: { id: 4, en_name: 'Yet Another Machine', pa_name: 'ډیجیټل ام ار ای', model_no: '2022', company_id: 1, } }];
const options = dataSource.map(item => Object.assign(item, { en_name: item.machinery.en_name }))
//...

    < multiselect
        : loading = "isLoading"
        v - model="selectedOption"
        @select="handleChange"
        : options = "options"
        : placeholder = "Lang.get('lang.Machineries')"
        track - by="id"
        : showLabels = "false"
        : allow - empty="false"
        label = "en_name"
            >
            <span slot="noResult">Oops! No elements found. Consider changing the search query.</span>
</multiselect >

Upvotes: 0

Related Questions