时间戳

首页 > 解决方案 > 我可以在 PrimeVue 下拉组件中预先选择一个值吗？

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

问题描述

案例：我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只是。

标签： javascriptvue.jsprimevue

解决方案

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

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

没有optionValue="value"：

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

与optionValue="value"：

4 === 4

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

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

推荐阅读