I'm banging my head against a wall here, so I'm really hoping someone can point me in the right direction. I've got a fairly simple setup which I've been able to reproduce in a Fiddle, which consists of 3 components
- A parent form
- A radio button selection
- A panel containing the radio buttons
Each panel has its own data storing the current radio value chosen. Nice and simple. When a radio button selection is made, it updates the internal value, and emits the change. Nothing fancy.
What isn't normal though, is that one panels value change is updating the other, but not the other way round. If I update panel 1, panel 2 doesn't change. But if I update panel 2, it does update panel 1.
Please can someone highlight where I am being stupid, because I've spent far too long trying various things to figure this out and I'm still no closer.
Here's a fiddle demonstrating the problem I'm running into. Any help will be hugely appreciated
CodePudding user response：
Oh *****!!! Figure it out, and it's really nothing to do with Vue.js at all. The issue was related to the radio buttons, and just how HTML forms work. Because I am using HTML radio buttons, they require a name (which I'd forgotten. On top of that, the labels were using a for attribute for the id of the input, which I'd set as the value of that input. But because each panel was using the same radio options, there were multiple radio buttons with the same id on the form so it selected all of them
CodePudding user response：
The problem of the code is the property id in the v-for.
:id="option.value"If you remove this option, it works.