Vue Neighbor Custom Component rendering error correct opening method

Don't talk more about the problem:

When encapsulating a custom component (for example, a custom drop-down list) two identical components occasionally render errors occur when multiple v-if change, clearly assigned correctly but the data that the Ajax method in the build may return is confusing, or other divine logic errors.

After the query found the correct practice, in the official website has been expressed:

Key

• Expected:number | string

  keyThe special properties are mainly used in Vue's virtual DOM algorithm to identify vnodes when compared to the old and new nodes. If you do not use Key,vue, you will use an algorithm that minimizes dynamic elements and tries to repair/re-use the same type of elements as much as possible. With key, it rearranges the order of elements based on the change of key and removes elements that do not exist on key.

  Child elements that have the same parent element must have a unique key. Duplicate keys can cause rendering errors.

  The most common use cases are in combination v-for :

  <ul>
    <v-for=: key="Item.id" ... </li>
  </ul>

  
  

  It can also be used to force substitution of elements/components instead of reusing them. It can be useful when you encounter a scenario like this:

  • Complete triggering of the component's lifecycle hooks
  • Triggering transitions

  For example:

  <transition>
    <: key="text" >{{text}}</span>
  </transition>

  When text a change occurs, it is <span> updated at any time and therefore transitions are triggered.

~~~~~~~~~

So the way to deal with this is to add a different key to the custom component.

For details, see X-Answer

https://www.zhihu.com/question/61064119

Vue Neighbor Custom Component rendering error correct opening method