Vue.js：基于下拉选择动态添加组件

Hey Peter, great question! Since you already have all your dropdown components built, adapting to this new multiple-selection requirement is totally manageable. Here's a step-by-step approach tailored to Vue.js, with practical code examples:

Instead of toggling visibility of pre-rendered components, we’ll maintain an array of filter items that tracks every selection the user makes. Each item will store the selected type and its current value (for editing). We’ll then dynamically render the corresponding dropdown component for each item in the array.

1. Set Up Your Data Structure #

First, create a reactive array to hold all added filter items. Each item should capture the type of dropdown and its selected value (for editing):

<script>
// Import your pre-built components
import SearchableDropdown from './components/SearchableDropdown.vue';
import NonSearchableDropdown from './components/NonSearchableDropdown.vue';
// Import other dropdown types as needed

export default {
  components: {
    SearchableDropdown,
    NonSearchableDropdown
    // Register all your dropdown components here
  },
  data() {
    return {
      filterItems: [], // Tracks every added filter
      availableTypes: [
        { label: 'Closed', value: 'closed' },
        { label: 'Reviewed', value: 'reviewed' },
        // Add other filter types here
      ]
    };
  }
};
</script>

2. Add a Selection Menu for New Filters #

Create a main dropdown to let users choose which filter type to add, then push a new item to filterItems when they select an option:

<template>
  <div class="filter-builder">
    <!-- Main dropdown to add new filters -->
    <select @change="addFilter">
      <option value="">Select a filter type</option>
      <option v-for="type in availableTypes" :key="type.value" :value="type.value">
        {{ type.label }}
      </option>
    </select>

    <!-- Dynamically render added filters -->
    <div class="filter-list">
      <div v-for="(item, index) in filterItems" :key="index" class="filter-item">
        <!-- Render the correct dropdown component based on type -->
        <component 
          :is="getComponentForType(item.type)"
          v-model="item.value"
          :placeholder="`Select ${item.type}`"
        />
        <!-- Delete button to remove the filter -->
        <button @click="removeFilter(index)">×</button>
      </div>
    </div>
  </div>
</template>

3. Add Methods to Manage Filters #

Implement methods to add filters, map types to components, and remove filters:

<script>
// ... (imports and components from step 1)
export default {
  // ... (components and data)
  methods: {
    addFilter(event) {
      const selectedType = event.target.value;
      if (selectedType) {
        // Push a new filter item with empty initial value
        this.filterItems.push({ type: selectedType, value: '' });
        // Reset the main dropdown
        event.target.value = '';
      }
    },
    getComponentForType(type) {
      // Map filter types to your pre-built component names
      switch (type) {
        case 'closed':
          return 'SearchableDropdown';
        case 'reviewed':
          return 'NonSearchableDropdown';
        // Add cases for other filter types
        default:
          return null;
      }
    },
    removeFilter(index) {
      this.filterItems.splice(index, 1);
    }
  }
};
</script>

4. Ensure Components Support v-model #

Make sure all your dropdown components work with v-model (most Vue component libraries support this out of the box, but if you built custom ones):

• Accept a value prop
• Emit an input event when the selection changes

Example for a custom searchable dropdown:

<template>
  <select @change="$emit('input', $event.target.value)" :value="value">
    <!-- Options here -->
  </select>
</template>

<script>
export default {
  props: ['value']
};
</script>

If you want to keep filters after a page refresh, add a watcher to save filterItems to localStorage:

<script>
export default {
  // ...
  created() {
    // Load saved filters on page load
    const savedFilters = localStorage.getItem('filterItems');
    if (savedFilters) {
      this.filterItems = JSON.parse(savedFilters);
    }
  },
  watch: {
    filterItems: {
      deep: true,
      handler(newItems) {
        localStorage.setItem('filterItems', JSON.stringify(newItems));
      }
    }
  }
};
</script>

This approach gives you full control over adding, editing, and removing filters dynamically—perfect for your updated requirement. Let me know if you need help adapting any part to your specific components!

内容的提问来源于stack exchange，提问作者PeterB