以编程方式从 Primevue Select 元素中选择一个选项

Question

我的 Nuxt3/Vue3 应用程序中有一个 Primevue Select 元素。 我想以编程方式更改所选选项，但我找不到有关如何执行此操作的信息。 没有“.value”我可以设置。

这是我的元素：

              <Select id="Gage" v-model="selectedGageValue" filter :options="getGageOptionsList" optionLabel="name"
            optionValue="description" placeholder=" ... " :virtualScrollerOptions="{ itemSize: 50 }"
            @change="onGageSelectionChange" class=""></Select>

Answer 1

您有以下代码：

<Select id="Gage" v-model="selectedGageValue" filter :options="getGageOptionsList" optionLabel="name"
        optionValue="description" placeholder=" ... " :virtualScrollerOptions="{ itemSize: 50 }"
        @change="onGageSelectionChange" class=""></Select>

查看您的组件，我可以预测您的 getGageOptionsList 具有如下所示的值：

getGageOptionsList: [ { name: 'Option1', description: 'Option1 description'}, { name: 'Option2', description: 'Option2 description'} ]

当您使用 Select 组件中的属性 optionValue 时，该组件会将 description 值放入 v 模式中 selectedGageValue

因此，要选择它，您需要将描述值设置为 selectedGageValue，如下所示：

selectedGageValue = 'Option2 description' //this will select the second option

它会起作用，但这不是正确的方法，因为使用长字符串作为标识符并不常见。这里有一些更好的方法来解决这个问题

第一种方法 - 更改您的 Select 组件并删除 optionValue，这样您就可以让 PrimeVue 知道您想要完整的数组值 例如：{ name: 'Option1', description: 'Option1 description'} 作为 optionValue。

<Select id="Gage" v-model="selectedGageValue" filter :options="getGageOptionsList" optionLabel="name"
    placeholder=" ... " :virtualScrollerOptions="{ itemSize: 50 }"
    @change="onGageSelectionChange" class=""></Select>

现在您需要设置您想要的 getGageOptionsList 中存储的键的整个值。例如：

this.selectedGageValue = this.getGageOptionsList[1] //it will programatically select the second option

第二种方法 - 更改您的 Select 组件并将 optionValue 编辑为更简单的属性（例如“id”）并将其添加到您的选项中，如下所示：

getGageOptionsList: [ { id:0, name: 'Option1', description: 'Option1 description'}, { id:1, name: 'Option2', description: 'Option2 description'} ]

现在，更改您的组件：

<Select id="Gage" v-model="selectedGageValue" filter :options="getGageOptionsList" optionLabel="name"
    optionValue="id" placeholder=" ... " :virtualScrollerOptions="{ itemSize: 50 }"
    @change="onGageSelectionChange" class=""></Select>

并以编程方式选择 id

this.selectedGageValue = 1 //this will select the second option