Vuesjs/Nuxtjs: Modification to one of the v-model Node reflects the changes in other Nodes v-models as well [duplicate]

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:

1. Drag and drop the Identifiers into the canvas. Now the URN will be selected.
2. 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

Solution 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>