vue3 多选框实时刷新接口使用示例

<template>
<div class="app-container">

<el-select v-model="selectedOptions" multiple placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="selected-values">
<h3>选中的选项：</h3>
<ul>
<li v-for="option in selectedOptions" :key="option">{{ option }}</li>
</ul>
</div>
</div>

</template>

<script setup name="operationDetails">
import { nextTick, ref, onMounted, toRaw,reactive } from 'vue'
import ElementPlus from 'element-plus';

const { proxy } = getCurrentInstance();

watchEffect(() => {
console.log('onMounted nextTick ')
})

onMounted(() => {
// Vue.js 提供的一个延迟执行机制，可以在 DOM 更新完成后执行回调函数
nextTick(() => {
console.log('onMounted nextTick ')
})
})

const options = [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' },
{ value: 'option4', label: '选项4' },
{ value: 'option5', label: '选项5' },
{ value: 'option6', label: '选项6' },
{ value: 'option7', label: '选项7' },
{ value: 'option8', label: '选项8' },
{ value: 'option9', label: '选项9' }
];
const selectedOptions = ref([]);

async function fetchApiData(selectedValues) {
try {
// 假设这是你的 API 端点
const response = await axios.post('/api/your-endpoint', {
selectedOptions: selectedValues
});
apiResults.value = response.data;
} catch (error) {
console.error('API 调用失败:', error);
apiResults.value = 'API 调用失败';
}
}

// 监听 selectedOptions 的变化
watch(selectedOptions, (newVal) => {
console.log('selectedOptions newVal',newVal)
fetchApiData(newVal);
});

</script>

<style scoped>

</style>