One value for one select?

Question

JavaScript

Hello. There are several selects, each can select value, you need to make sure that, for example, when you select value in one select, and then select in another, the first one is cleared. Like here codepan.net/gist/1194c199270165e8d2753586a4d5a718
Here is my draft: jsfiddle.net/vxLhbo5m/173
For some reason, v1 vue was chosen in the fiddle
Here is an updated draft https://codesandbox.io/s/0p7w81yz5p
Please help!

Answer 1

Add selected to each items element, use it in v-model, also keep track of the list toggle in the parent, and reset the selected of all elements except the toggled one. Somehow so .
UPD. It was suggested in the comments that the proposed solution is a hack because...
1) Outside the component - how else? After all, changing one instance of a component should affect others.
2) Adding selected is not a problem. Do a map of the items array, throwing this selected into each element. Like so . Or you can set selected values ​​with $set in the onCardChanged method, like this (which is really a hack).
3) "Events to implement" - but that's how it's done. You have implemented the generation of the input event, the processing of which I added.

Answer 2

The model only works for form elements.
By the way, this is written in the console when you use the dev version.
Therefore, you bind an event to the component so that you can change the property and also bind the property.
In the component itself, on the selection event, you trigger the instance event.