vue3 选择下拉列表参数执行查询刷新
时间: 2023-05-23 14:06:37 浏览: 247
A:在Vue3中,可以通过使用`v-model`指令绑定一个选项值到组件的数据属性上。当选项值发生改变时,组件的数据属性也会随之改变,这样就可以触发相应的查询操作。以下是一个基本的下拉列表组件的示例代码:
```html
<template>
<div>
<label for="selectedItem">选择一个选项:</label>
<select v-model="selectedItem" @change="refreshData">
<option value="">请选择</option>
<option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
selectedItem: '', // 选项值
options: [ // 模拟从后端接口获取到的选项列表数据
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' },
],
};
},
methods: {
refreshData() {
console.log('refreshData:', this.selectedItem);
// 在这里执行查询或刷新操作
},
},
};
</script>
```
在上面的代码中,首先在`data`中定义了一个`selectedItem`的属性,用于绑定选项值。然后在`<select>`元素上使用`v-model`指令将选项值绑定到`selectedItem`属性上。`@change`事件可以监听选项值的变化,当选项值发生改变时,会触发`refreshData`方法,这里可在函数中编写查询或刷新的操作代码。