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

2022-02-25 00:00:00 vue.js nuxt.js vue-component vuejs2 v-model

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

相关文章