Vuejs/Nuxtjs：如何在不使用 v-for 的情況下建立動態 V 模型名稱？

Question

我在 Vuejs/Nuxtjs 應用程式中遇到了一個棘手的問題。在應用程式中，我動態創建多個 Nodes 。這些 Nodes 有 Radio 按鈕 我已為其分配了 v-model。但是，當我更改一個 Vuejs v-model 的值時，會影響所有其他 Node 值。

我知道發生此問題是因為所有 Nodes 使用相同的 V-model。我想為我的 Radio 按鈕 分配不同的 V-model 但我想在不使用 v-for 的情況下執行此操作。

我已經在 CodeSandbox 中建立了範例程式碼

重現步驟：

1. 將 Identifiers 拖曳到畫布中。現在將選擇 URN。
2. 現在將另一個 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

Answer 1

經過一番努力，終於可以正常運作了。我錯誤地使用了 Radio 按鈕 功能。我把它改成了這樣，效果很好：

sssccc