如何在Vuejs中创建动态两个关系下拉菜单

data() {
  return {
    categories: ['Category 1', 'Category 2', 'Category 3'],
    subcategories: {
      'Category 1': ['Subcategory 1.1', 'Subcategory 1.2', 'Subcategory 1.3'],
      'Category 2': ['Subcategory 2.1', 'Subcategory 2.2', 'Subcategory 2.3'],
      'Category 3': ['Subcategory 3.1', 'Subcategory 3.2', 'Subcategory 3.3']
    },
    selectedCategory: '',
    selectedSubcategory: ''
  }
}

<template>
  <div>
    <select v-model="selectedCategory" @change="updateSubcategories">
      <option value="">Select Category</option>
      <option v-for="category in categories" :value="category">{{ category }}</option>
    </select>
    <select v-model="selectedSubcategory">
      <option value="">Select Subcategory</option>
      <option v-for="subcategory in subcategories[selectedCategory]" :value="subcategory">{{ subcategory }}</option>
    </select>
  </div>
</template>

methods: {
  updateSubcategories() {
    this.selectedSubcategory = '';
  }
}

<template>
  <div>
    <select v-model="selectedCategory" @change="updateSubcategories">
      <option value="">Select Category</option>
      <option v-for="category in categories" :value="category">{{ category }}</option>
    </select>
    <select v-model="selectedSubcategory">
      <option value="">Select Subcategory</option>
      <option v-for="subcategory in subcategories[selectedCategory]" :value="subcategory">{{ subcategory }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: ['Category 1', 'Category 2', 'Category 3'],
      subcategories: {
        'Category 1': ['Subcategory 1.1', 'Subcategory 1.2', 'Subcategory 1.3'],
        'Category 2': ['Subcategory 2.1', 'Subcategory 2.2', 'Subcategory 2.3'],
        'Category 3': ['Subcategory 3.1', 'Subcategory 3.2', 'Subcategory 3.3']
      },
      selectedCategory: '',
      selectedSubcategory: ''
    }
  },
  methods: {
    updateSubcategories() {
      this.selectedSubcategory = '';
    }
  }
}
</script>