使用select2选择Vue国家和州

<template>
  <div>
    <select v-model="selectedCountry" class="select2">
      <option value="">请选择国家</option>
      <option v-for="country in countries" :value="country">{{ country }}</option>
    </select>
    <select v-model="selectedState" class="select2">
      <option value="">请选择州</option>
      <option v-for="state in states" :value="state">{{ state }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCountry: '',
      selectedState: '',
      countries: ['中国', '美国', '日本', '英国'], // 可以从后端获取国家列表数据
      states: ['北京', '上海', '纽约', '东京', '伦敦'] // 可以从后端根据选中的国家获取对应的州列表数据
    };
  },
  mounted() {
    $('.select2').select2(); // 初始化select2插件
  },
  watch: {
    selectedCountry(newValue) {
      // 根据选中的国家获取对应的州列表数据
      // 可以通过Ajax请求后端接口获取数据，然后更新this.states
    }
  }
};
</script>

<style>
@import "~select2/dist/css/select2.min.css";
</style>