Vuejs/Nuxtjs：如何在不使用v-for的情况下创建动态V-model名称？ [英] Vuejs/Nuxtjs : How to create dynamic V-model names without using the v-for?

问题描述

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

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

我已经在CodeSandbox

中创建了示例代码

复制步骤：

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

推荐答案

经过一些努力才能使其正常工作。我错误地使用了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名称？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！