关于自定义下拉菜单的区域选择与联动实现的技术咨询

Hey there! Let's sort out your cascading dropdown problem since you're not using v-model for these custom selects. Here's a step-by-step solution tailored to your code:

Step 1: Fix Your Data Structure First #

Your current addSelectData has duplicate areas keys in each object—this will only keep the last areas value instead of storing all regions. Let's update it to use an array for areas:

data:{
  addSelectData: [{
    name:"Taipei",
    areas: ["A", "B", "C", "D", "E", "F"] // Changed to array to store all regions
  }, {
    name:"Taichung",
    areas: ["A1", "B1", "C1", "D1", "E1", "F1"] // Changed to array
  }],
  addPlaceholder: "Select county",
  areaPlaceholder: "Select area",
  isAddShow: false,
  isAreaShow: false,
  selectedCity: null // Add this to store the chosen city object
}

Step 2: Update the City Selection Method #

Modify your addSelectOption method to save the entire selected city object (not just the name)—this is critical for filtering regions later:

addSelectOption(item) {
  this.addPlaceholder = item.name
  this.selectedCity = item // Store the full city data
  this.isAddShow = false
  // Reset region placeholder when switching cities
  this.areaPlaceholder = "Select area"
}

Step 3: Create Dynamically Filtered Region Options #

Add a computed property to automatically filter regions based on the selected city. This will update in real-time whenever selectedCity changes:

computed: {
  filteredAreaOptions() {
    // Return empty array if no city is selected
    if (!this.selectedCity) return []
    // Wrap each area in an object to match your click handler's expected structure
    return this.selectedCity.areas.map(area => ({ name: area }))
  }
}

Step 4: Update the Region Dropdown Template #

Change the region dropdown's v-for to use the filtered options, and adjust the display logic:

<!-- 选择区域 -->
<div class="form-control invoice-select">
  <div class="login-placeholder" @click="isAreaShow=!isAreaShow">{{ areaPlaceholder }} 
    <span class="arrow-icon" :class="{active:!isAreaShow}"></span> 
  </div>
  <ul v-show="isAreaShow" class="l-select-wrap">
    <!-- Use filteredAreaOptions instead of addSelectData -->
    <li v-for="(area, i) in filteredAreaOptions" :key="i" @click="areaSelectOption(area)" class="l-select-item">
      <span>{{ area.name }}</span>
    </li>
  </ul>
</div>

Step 5: Adjust the Region Selection Method #

Update areaSelectOption to handle the new area object structure:

areaSelectOption(area) {
  this.areaPlaceholder = area.name
  this.isAreaShow = false
}

Optional: Add User Experience Improvements #

If you want to prevent users from opening the region dropdown before selecting a city, add a condition to the click handler:

<div class="login-placeholder" @click="selectedCity && (isAreaShow=!isAreaShow)">
  {{ areaPlaceholder }} 
  <span class="arrow-icon" :class="{active:!isAreaShow}"></span> 
</div>

You can also add a grayed-out style to the region placeholder when no city is selected to make the state clearer.

That's all! Now when you select Taipei, the region dropdown will only show Taipei's areas, and switching to Taichung will load its regions automatically. The core idea is storing the selected city object and using a computed property to dynamically filter options—no v-model required for this custom dropdown setup.

内容的提问来源于stack exchange，提问作者Chieh YU WU