我在 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 按鈕
功能。我把它改成了這樣,效果很好: