我在 Vuejs/Nuxtjs
應(yīng)用程式中遇到了一個(gè)棘手的問(wèn)題。在應(yīng)用程式中,我動(dòng)態(tài)創(chuàng)建多個(gè) Nodes
。這些 Nodes
有 Radio 按鈕
我已為其分配了 v-model
。但是,當(dāng)我更改一個(gè) Vuejs v-model
的值時(shí),會(huì)影響所有其他 Node
值。
我知道發(fā)生此問(wèn)題是因?yàn)樗?Nodes
使用相同的 V-model
。我想為我的 Radio 按鈕
分配不同的 V-model
但我想在不使用 v-for
的情況下執(zhí)行此操作。
我已經(jīng)在 CodeSandbox 中建立了範(fàn)例程式碼
重現(xiàn)步驟:
Identifiers
拖曳到畫(huà)布中?,F(xiàn)在將選擇 URN
。 Identifiers
拖曳到畫(huà)布中?,F(xiàn)在第一個(gè) Identifiers 節(jié)點(diǎn):URN
將會(huì)消失。我無(wú)法獨(dú)立處理每個(gè) Node 值
。 問(wèn)題出現(xiàn)在檔案 @components/IdentifiersNode.vue
和單選按鈕中。
基於 Kissu 回應(yīng)的程式碼範(fàn)例:
<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>
有人可以檢查一下並讓我知道我在這裡做錯(cuò)了什麼:https://codesandbox.io/s/cocky-matan-kvqnu?file=/nuxt.config.js
經(jīng)過(guò)一番努力,終於可以正常運(yùn)作了。我錯(cuò)誤地使用了 Radio 按鈕
功能。我把它改成了這樣,效果很好:
ssscccIdentifiers Node: {{ ID }}{{ "Value : " + identifierSyntax }} Syntax: