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

Question

I am encountering a tricky issue in my Vuejs/Nuxtjs application. In the application, I am creating multiple Nodes dynamically. These Nodes have the Radio button for which I have assigned a v-model. However, when I change the value of one Vuejs v-model is affecting all other Node Values.
I am aware that this issue is happening because of the same v-model being used for all Nodes. I would like to assign a different V-model to my Radio button but I want to do it without using the v-for.
I have created the sample code in the CodeSandbox
Steps to reproduce:
Drag and drop the Identifiers into the canvas. Now the URN will be selected.
Now Drag and drop another Identifiers into the canvas. Now the first Identifiers Node: URN will disappear. I am unable to handle each Node value independently.
The problem is arising in the file #components/IdentifiersNode.vue and in the radio button.
Code sample based on the 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 please check and let me know what am I doing wrong here: https://codesandbox.io/s/cocky-matan-kvqnu?file=/nuxt.config.js

Answer 1

After some effort able to get it working. I was using the Radio button functionalities wrongly. I changed it to something like this and it worked fine:
<template>
<div ref="el">
<div class="header">Identifiers Node: {{ ID }}</div>
<div id="app" class="nodeContainer">
{{ "Value : " + identifierSyntax }}
Syntax:
<input
:id="`identifierTypeURN-${ID}`"
:data="identifierSyntax"
value="URN"
type="radio"
:name="`instanceIdentifier-${ID}`"
:checked="identifierSyntax === 'URN'"
#input="instanceIdentifiersSyntaxChange($event, 'URN')"
/>
<label :for="`identifierTypeURN-${ID}`">URN</label>
<input
:id="`identifierTypeWebURI-${ID}`"
:data="identifierSyntax"
value="WebURI"
type="radio"
:name="`instanceIdentifier-${ID}`"
:checked="identifierSyntax === 'WebURI'"
#input="instanceIdentifiersSyntaxChange($event, 'WebURI')"
/>
<label :for="`identifierTypeWebURI-${ID}`">WebURI</label>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ID: "",
nodeId: "",
bizStep: "",
allNodeInfo: [],
identifierSyntax: "URN",
};
},
mounted() {
console.log("MOUNTED");
this.$nextTick(() => {
const id = this.$el.parentElement.parentElement.id;
const data = this.$df.getNodeFromId(id.slice(5));
this.ID = data.data.ID;
this.nodeId = data.data.nodeId;
this.allNodeInfo = JSON.parse(
JSON.stringify(
this.$store.state.modules.ConfigureIdentifiersInfoStore
.identifiersArray,
null,
4
)
);
this.identifierSyntax = this.allNodeInfo.find(
(node) => node.identifiersId === this.nodeId
).identifierSyntax;
});
},
methods: {
// On change of the IdentifierSyntax change, change the value in the respective node info
instanceIdentifiersSyntaxChange(event, syntaxValue) {
console.log("CHANGED : " + syntaxValue);
console.log(event.target.defaultValue);
this.identifierSyntax = syntaxValue;
// Change the value of the respective syntax within the Node information in IdentifiersNode array
this.$store.commit(
"modules/ConfigureIdentifiersInfoStore/identifiersSyntaxChange",
{ nodeId: this.ID, syntaxValue }
);
},
},
};
</script>
<style>
.header {
background: #494949;
margin-top: -15px;
margin-left: -15px;
margin-right: -15px;
padding: 10px 15px;
margin-bottom: 15px;
}
</style>