我可以在 PrimeVue 下拉组件中预先选择一个值吗？

Question

案例：我正在PrimeVue一个项目中使用Vue.js。在本例中，我有一个下拉列表，作为 的组件PrimeVue，它使用对象数组。下拉组件如下所示：

<template #position>
    <Dropdown
        class="multiselect-fullsize"
        v-model="selectedFilter[index].pos"
        :options="filterPositions"
        optionLabel="name"
        placeholder="Position" />
    </template>

这个下拉组件有一个:options属性，它引用以下数组：

filterPositions: [
    {"name": "0", "value": "0"},
    {"name": "1", "value": "1"},
    {"name": "2", "value": "2"},
    {"name": "3", "value": "3"},
    {"name": "4", "value": "4"},
    {"name": "5", "value": "5"},
    {"name": "6", "value": "6"},
    {"name": "7", "value": "7"},
    {"name": "8", "value": "8"}
  ]

问题：有没有办法在此下拉列表中指定预先选定的项目PrimeVue？

编辑：根据文档，没有属性可以定义预选项目。所以也许，如果有一个解决方案，它也可能是JavaScript唯一的。

Answer 1

答案是：是的！Dropdown |文档中的描述 PrimeVue有点令人困惑，至少对我来说是这样。问题是，\xc2\xb4t 不足以提供 av-model就像我所做的那样v-model="selectedFilter[index].pos"，我还必须定义optionValue和 在我的情况下optionValue="value"，因为中的值filterPositions有键value。

\n

看起来，如果设置了此项，PrimeVue\xc2\xb4s Dropdown 就能够检查是否v-model与optionValue. 如果不是，v-model则与整体进行比较filterPositions项目进行比较。例如：

\n

没有optionValue="value"：

\n

{"name": "4", "value": "4"} === 4\n

\n

和optionValue="value"：

\n

4 === 4\n

\n

因此，在这种情况下，我的下拉组件必须如下所示：

\n

<Dropdown\n    class="multiselect-fullsize"\n    v-model="selectedFilter[index].pos"\n    :options="filterPositions"\n    optionLabel="name"\n    optionValue="value"\n    placeholder="Position"\n/>\n

\n