Vue 多选组件的标签无法读取嵌套属性

Question

我有一个这样的数据结构：

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, ... } },
}

我想将机械属性的en_name属性作为标签传递：

    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>

下拉选项为空，但如果我传递一个不像 machineries_ID 那样嵌套的属性，它就可以正常工作。

Answer 1

您无法动态使用标签，但您可以更改数据结构以适应组件（多选）

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 >