Vue 3 使用 watch 监听 a-select 组件值变化并输出到控制台

<template>
  <a-select v-model:value='selectedDoctor' show-search :filter-option='changeOption' style='width: 150px'>
    <a-select-option v-for='item in doctors' :key='item.pym' :value='item.id'>{{ item.employname }}</a-select-option>
  </a-select>
</template>
<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const selectedDoctor = ref(null);
    const doctors = ref([
      { id: 1, employname: 'Doctor 1' },
      { id: 2, employname: 'Doctor 2' },
      { id: 3, employname: 'Doctor 3' },
    ]);

    // 监听 selectedDoctor 的改变
    watch(selectedDoctor, (newVal) => {
      console.log('Selected Doctor:', newVal);
    });

    return {
      selectedDoctor,
      doctors,
    };
  },
};
</script>
<p>在上面的示例中，我们创建了一个<code>selectedDoctor</code>的响应式引用，用于存储用户选择的医生。然后，我们使用<code>watch()</code>函数来监听<code>selectedDoctor</code>的变化，并在变化时将结果输出给控制台。</p>