Vue.js中查找identifier数组索引并添加valid_value数组的问题

Hey there! Let's break down why you're hitting this issue with indexOf returning -1, and how to correctly find the index to add your valid_value array.

The Root Cause #

Your identifier array is a reactive Observer array, and every element inside it is wrapped in a Proxy (this is how Vue's reactivity system tracks changes). The indexOf method relies on strict equality (===) to match elements—meaning it checks if the reference of the item you're searching for is exactly identical to an item's reference in the array.

If you're trying to search using:

• A raw (non-reactive) version of the object, or
• A different Proxy instance that holds the same data but has a unique reference

indexOf won't find a match and will return -1 every time.

Solutions to Correctly Find the Index #

1. Use findIndex with a Property Match (Most Reliable) #

If your identifier items have a unique identifier like entity_type_key, use findIndex to search based on that property value instead of relying on reference equality. This works perfectly even with reactive wrapped objects.

Example code:

// Replace "your-target-key" with the actual entity_type_key you're looking for
const targetIndex = poiDetails.identifier.findIndex(item => 
  item.entity_type_key === "your-target-key"
);

if (targetIndex !== -1) {
  // Add your valid_value array to the matched item's valid_value property
  poiDetails.identifier[targetIndex].valid_value.push(...yourValidValueArray);
}

2. Search Using the Exact Reactive Proxy Instance #

If you already have a reference to the reactive item from the identifier array (e.g., you fetched it earlier via array indexing), use that exact instance with indexOf:

// Grab the reactive item directly from the array first
const targetItem = poiDetails.identifier[1]; // Example index

// Now search using this reactive instance
const targetIndex = poiDetails.identifier.indexOf(targetItem);

if (targetIndex !== -1) {
  poiDetails.identifier[targetIndex].valid_value.push(...yourValidValueArray);
}

3. Quick Reactivity Tip #

When modifying the valid_value array inside a reactive object, stick to Vue-friendly array methods like push, splice, or spread operators to ensure reactivity is preserved. Directly replacing the array (e.g., item.valid_value = [...item.valid_value, ...newValues]) works too, since the parent object is reactive.

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