Subscribe on changes!

If the same page uses the same component multiple times, the components will interfere with each other

avatar
Oct 16th 2022

Vue version

3.2.41

Link to minimal reproduction

https://sfc.vuejs.org/#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

Steps to reproduce

  1. Upload a picture at position 2
  2. The picture will be transferred to the No. 1 component

What is expected?

It is expected that the picture will be uploaded in the No. 2 position, and the picture can be uploaded to the No. 2 position. Independent components should not interfere with each other.

What is actually happening?

Upload a picture at position 2, and upload the picture to position 1

System Info

No response

Any additional comments?

Using multiple identical components on the same page should not interfere with each other, but the actual effect is not in line with expectations.

avatar
Oct 16th 2022

You are interfering yourself by using global query Selectors like document.getElementById('uploadIcon'), which will always match the first element found - the one in the first component.