我在 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
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
经过一番努力,终于可以正常工作了。我错误地使用了
Radio 按钮功能。我把它改成了这样,效果很好: