在写地址选择器时,选择省份显示对应的城市,监听省份和城市的变化,代码如下,主要研究watch
<script>
import { defineComponent, reactive, toRefs, watch } from "vue";
export default defineComponent({
setup(props, { emit }) {
const state = reactive({
province: '',// 省份
country: '', // 城市
detailedAdress: '', // 详细地址
countries: [], // 城市列表
allCity: [], // 所有省份及城市数据
});
// 监听省份--->单个数据
watch(() => state.province, () => {
// 获取当前选择的省份所对应的城市
const arr = state.allCity.filter((item) => item.province == state.province);
console.log(arr);
// 将过滤后的城市数据添加进城市数组里
state.countries = arr[0].cities;
// 更改省份时重置之前选择的城市
state.country = "";
// 更改省份时重置之前填写的详细地址
state.detailedAdress = "";
console.log(state.countries);
}
);
// 监听城市--->单个数据
watch(() => state.country, () &