Select2组件无选中项问题：基于现成示例修改后异常

Hey, let's figure out why your modified code isn't showing the selected item!

First, let's break down the key issue: when you adapted the working example, you probably missed linking the selected state properly to your data and the UI. Here are the common fixes you can try:

1. Track the selected item in your data #

You need a dedicated piece of state to hold which item is currently selected. For example, if you're working with a list of items:

// In your component's data
data() {
  return {
    items: [/* Your modified list of items */],
    selectedItemId: null // Stores the ID of the selected item
  };
}

2. Bind the selected state to your UI elements #

When rendering your items, use a conditional class or attribute to visually mark the selected one. For a clickable list:

<ul>
  <li 
    v-for="item in items" 
    :key="item.id"
    :class="{ 'selected': item.id === selectedItemId }"
    @click="selectedItemId = item.id"
  >
    {{ item.label }}
  </li>
</ul>

The selected class (use whatever class name you prefer for your styling) will only apply to the item whose ID matches selectedItemId.

3. For dropdowns, use v-model correctly #

If you're using a <select> element, v-model automatically syncs the selected value with your data—no extra event handlers needed:

<select v-model="selectedValue">
  <option 
    v-for="item in items" 
    :key="item.id" 
    :value="item.value"
  >
    {{ item.label }}
  </option>
</select>

// In your component's data
data() {
  return {
    items: [/* Your options list */],
    selectedValue: '' // Initialize with a default value if needed
  };
}

Quick debug checklist: #

• Did you update the selected state when the user clicks/selects an item?
• Is your UI actually checking that state to apply the selected styling?
• Are you using unique keys for each list item (critical for Vue's reactivity system)?

Once you fix these connections, your selected item should display properly!

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