我在 Vuejs/Nuxtjs
应用程序中遇到了一个棘手的问题。在应用程序中,我动态创建多个 Nodes
。这些 Nodes
有 Radio 按钮
我已为其分配了 v-model
。但是,当我更改一个 Vuejs v-model
的值时,会影响所有其他 Node
值。
我知道发生此问题是因为所有 Nodes
使用相同的 V-model
。我想为我的 Radio 按钮
分配不同的 V-model
但我想在不使用 v-for
的情况下执行此操作。
我已经在 CodeSandbox 中创建了示例代码
重现步骤:
Identifiers
拖放到画布中。现在将选择 URN
。Identifiers
拖放到画布中。现在第一个 Identifiers 节点:URN
将消失。我无法独立处理每个 Node 值
。问题出现在文件 @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 按钮
功能。我把它改成了这样,效果很好: