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

【问题标题】：Vuejs/Nuxtjs : How to create dynamic V-model names without using the v-for?Vuejs/Nuxtjs：如何在不使用 v-for 的情况下创建动态 V-model 名称？
【发布时间】：2022-01-10 07:40:08
【问题描述】：

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

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

我已经在CodeSandbox中创建了示例代码

重现步骤：

将Identifiers 拖放到画布中。现在将选择URN。
现在将另一个Identifiers 拖放到画布中。现在第一个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

【问题讨论】：

你应该使用:data和@input而不是v-model，这样会更简单。
@kissu 非常感谢您的回复。我能够理解@input 并进行了相应的更改，但我不理解:data 部分。我试图删除 v-model 并添加 :data 但这似乎不起作用。您能否为input type radio 提供一些与:data 相关的参考资料？我在上面的问题中添加了一个代码示例供您参考。
data这里主要是一个道具，名字是占位符。将其替换为您正在使用的状态。此外，您可能需要model，具体取决于单选按钮发送的事件类型。检查那些低级 HTML 的东西总是有点棘手。
@kissu 我能够在一定程度上遵循，但仍然有点困惑。这是否意味着我需要创建另一个customized component？然后在我的IdentifiersNode.vue 中使用该自定义组件？
否，请查看广播事件发送的事件。

标签： vue.js vuejs2 vue-component nuxt.js v-model

【解决方案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>

【讨论】：