Vuejs/Nuxtjs: How to create dynamic V model names without using v-for?

Question

I'm facing a tricky issue in my Vuejs/Nuxtjs application. In the application I create multiple Nodes dynamically. These Nodes have Radio buttons that I have assigned v-model to. However, when I change the value of one Vuejs v-model, it affects all other Node values.

I know this problem occurs because all Nodes use the same V-model. I want to assign a different V-model to my Radio button but I want to do this without using v-for.

I have created sample code in CodeSandbox

Steps to reproduce:

1. Drag Identifiers and drop them into the canvas. URN will now be selected.
2. Now drag and drop another Identifiers into the canvas. Now the first Identifiers node: URN will disappear. I can't handle each Node value independently.

The problem occurs in the file @components/IdentifiersNode.vue and the radio button.

Code example based on Kissu response:

<input
    id="identifierTypeURN"
    :data="identifierSyntax"
    value="URN"
    type="radio"
    name="instanceIdentifierURN"
    @input="instanceIdentifiersSyntaxChange('URN')"
>
<label for="identifierTypeURN">URN</label>
<input
    id="identifierTypeWebURI"
    :data="identifierSyntax"
    value="WebURI"
    type="radio"
    name="instanceIdentifierWebURI"
    @input="instanceIdentifiersSyntaxChange('WebURI')"
>
<label for="identifierTypeWebURI">WebURI</label>

Can someone check this out and let me know what I'm doing wrong here: https://codesandbox.io/s/cocky-matan-kvqnu?file=/nuxt.config.js

Answer 1

After a lot of hard work, it finally works normally. I used the Radio button function incorrectly. I changed it to this and it works great:

sssccc