VueJS中整合bootstrap-vue Form Tags与vue-simple-suggest组件问询

I’ve worked through your code and identified a cleaner approach to get these two components working together seamlessly. The main issue with your current setup is nesting b-form-tags inside vue-simple-suggest—instead, we can leverage Bootstrap-Vue’s scoped input slot to inject the suggestion component directly into the tag input flow.

Here’s the corrected, functional implementation:

<template>
  <div class="my-3">
    <b-form-tags 
      v-model="tags" 
      placeholder="Enter Keyword" 
      size="lg" 
      tag-variant="success" 
      tag-pills
    >
      <!-- Use Bootstrap-Vue's input slot to add suggestion functionality -->
      <template #input="{ value, inputAttrs, inputHandlers }">
        <vue-simple-suggest
          v-model="currentQuery"
          mode="select"
          :list="suggestionsList"
          :filter-by-query="true"
          @select="handleSuggestionSelect"
        >
          <input
            :value="value"
            v-bind="inputAttrs"
            v-on="inputHandlers"
            @input="currentQuery = $event.target.value"
            class="form-control form-control-lg"
          />
        </vue-simple-suggest>
      </template>
    </b-form-tags>
  </div>
</template>

<script>
import VueSimpleSuggest from 'vue-simple-suggest'
import 'vue-simple-suggest/dist/styles.css'

export default {
  name: "SeedWordsSuggestions",
  components: {
    VueSimpleSuggest
  },
  data() {
    return {
      tags: [], // Stores all selected tags (bound to b-form-tags)
      currentQuery: '', // Tracks user input for suggestion filtering
      suggestionsList: ['Angular', 'ReactJs', 'VueJs'] // Your suggestion source
    }
  },
  methods: {
    handleSuggestionSelect(selectedItem) {
      // Add the suggestion to tags only if it's not already present
      if (!this.tags.includes(selectedItem)) {
        this.tags.push(selectedItem);
      }
      // Clear the input field after selection
      this.currentQuery = '';
    }
  }
}
</script>

<style scoped>
/* Optional: Match suggestion list styling to Bootstrap's design */
.vue-simple-suggest__list {
  border-color: #ced4da;
  border-radius: 0.3rem;
}
.vue-simple-suggest__item--selected {
  background-color: #007bff;
  color: white;
}
</style>

Key Changes & Explanations: #

1. Scoped Input Slot: We use Bootstrap-Vue’s built-in input slot to replace the default tag input with vue-simple-suggest. This preserves all native tag functionality (like adding via enter key, removing tags) while adding suggestion support.
2. Dual Data Binding:
   • tags is bound directly to b-form-tags to manage the list of selected capsule tags.
   • currentQuery syncs with vue-simple-suggest to track user input and filter the suggestion list in real time.
3. Selection Handling: The handleSuggestionSelect method adds the chosen suggestion to the tags array (avoiding duplicates) and clears the input field for the next entry.

VueJS Knowledge to Master This Integration: #

• Scoped Slots: Understanding how to use slots that pass props (like value, inputAttrs from b-form-tags) is essential for customizing component behavior.
• Component Event Handling: Listening to custom events (like @select from vue-simple-suggest) and native DOM events (like @input on the input element) to sync data between components.
• v-model & Data Sync: Knowing how v-model works for both native inputs and custom components to keep state consistent across your app.
• Basic Array Manipulation: Using methods like push and includes to manage the tags list and prevent duplicates.

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