Vuejs/Nuxtjs:如何在不使用v-for的情况下创建动态V-model名称?
我在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
解决方案
经过一些努力才能使其正常工作。我错误地使用了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>
相关文章