Vuejs/Nuxtjs : 如何在不使用 v-for 的情况下创建动态 V-model 名称？

Question

我的 Vuejs/Nuxtjs 应用程序遇到了一个棘手的问题。在应用程序中，我正在动态创建多个 Nodes。这些 Nodes 具有 Radio button，我为其分配了 v-model。但是，当我更改一个 Vuejs v-model 的值时，会影响所有其他 Node 值。

我知道发生此问题是因为所有 Nodes 使用相同的 v-model。我想为我的 Radio button 分配一个不同的 V-model 但我想在不使用 v-for.

的情况下执行此操作

我已经在 CodeSandbox

中创建了示例代码

重现步骤：

将 Identifiers 拖放到 canvas 中。现在 URN 将被选中。
现在将另一个 Identifiers 拖放到 canvas 中。现在第一个 Identifiers Node: URN 将消失。我无法独立处理每个 Node value。

问题出现在文件 @components/IdentifiersNode.vue 和单选按钮中。

基于 Kissu 响应的代码示例：

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

有人可以检查并让我知道我在这里做错了什么吗：https://codesandbox.io/s/cocky-matan-kvqnu?file=/nuxt.config.js

Answer 1

经过一些努力能够让它工作。我错误地使用了 Radio button 功能。我把它改成了这样，它工作正常：

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

Vuejs/Nuxtjs : 如何在不使用 v-for 的情况下创建动态 V-model 名称？

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

vue.js

vue-component

vuejs2

nuxt.js

v-model