Vuejs/Nuxtjs : Comment créer des noms de modèles V dynamiques sans utiliser v-for ?

Question

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

Je sais que ce problème se produit à cause de tous les Nodes 使用相同的 V-model。我想为我的 Radio 按钮 分配不同的 V-model 但我想在不使用 v-for cas de cela.

J'ai créé l'exemple de code dans CodeSandbox

Étapes pour reproduire :

1. volonté Identifiers 拖放到画布中。现在将选择 URN.
2. Maintenant, ajoutez-en un autre Identifiers 拖放到画布中。现在第一个 Identifiers 节点：URN 将消失。我无法独立处理每个 Node 值.

Le problème se produit dans les fichiers @components/IdentifiersNode.vue et les boutons radio.

Exemple de code basé sur la réponse de 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>

Quelqu'un peut-il vérifier cela et me faire savoir ce que je fais de mal ici : https://codesandbox.io/s/cocky-matan-kvqnu?file=/nuxt.config.js

Answer 1

Après beaucoup de travail acharné, cela fonctionne enfin normalement. J'ai mal utilisé la fonction Radio 按钮 . Je l'ai changé pour ceci et ça fonctionne très bien :

sssccc