我可以在 PrimeVue Dropdown 组件中预先 select 一个值吗？

Question

案例：我在Vue.js项目中使用PrimeVue。在这种情况下，我有一个下拉菜单，作为 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 的下拉列表中指定一个预先选择的项目？

编辑： 根据documentation，没有属性定义预选项。所以也许，如果有解决方案，它可能只是 JavaScript。

Answer 1

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

看起来，如果设置了此项，PrimeVue 的下拉菜单能够检查 v-model 是否与 optionValue 匹配。如果不是，v-model 将与整个 filterPositions 项目进行比较。例如：

没有optionValue="value":

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

与optionValue="value":

4 === 4

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

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

Answer 2

只需将占位符值设置为预选值

<Dropdown
class="multiselect-fullsize"
v-model="selectedFilter"
:options="filterPositions"
optionLabel="name"
optionValue="value"
:placeholder="selectedFilter.value"
/>

Answer 3

selectedFilter[index].pos = {"name": "4", "value": "4"}

我可以在 PrimeVue Dropdown 组件中预先 select 一个值吗？

Can I pre select a value in an PrimeVue Dropdown component?

javascript

vue.js

primevue