Situation: Currently, I am incorporating PrimeVue into a Vue.js project. Within this setup, there is a dropdown component sourced from PrimeVue, utilizing an array of objects. The structure of the dropdown component appears as follows:
<template #position>
<Dropdown
class="multiselect-fullsize"
v-model="selectedFilter[index].pos"
:options="filterPositions"
optionLabel="name"
placeholder="Position" />
</template>
The dropdown component makes use of the :options property, which directly references the subsequent array:
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"}
]
Query: Is there a method to designate a pre-selected item within this PrimeVue dropdown?
Note: As per the details provided in the official documentation, no explicit property exists for setting a pre-selected item. Hence, any potential workaround would likely involve utilization of pure JavaScript.