Question

我对html和vue非常陌生，并尝试创建单选按钮。我使用用于创建UI的本地JSON文件。我遍历JSON对象并相应地创建单选按钮。我使用“ defaultedOptionId”来查找要检查的默认值。这是我的JSON：

{ "id": 1,
  "selected": 1,
  "defaultedOptionId": 2,
  "selections": [
    {
      "selectionId": 1,
      "description: "XX"
    },
    ...
}, 
...

我正在使用Vue组件，该组件基本上保存JSON文件。在模板中，我有代码，因此当'defaultedOptionId === selectionId'时，请检查为默认值

<p v-for="(selection, index) in choice.selections">
     <input v-if="choice.defaultOptionId === selection.selectionId" type="radio" :name="'option_' + choice.choiceId" :value="selection.selectionId" checked></input>
     <input v-else type="radio" :name="'option_' + choice.choiceId" :value="selection.selectionId"></input>
        {{ index+1 }}. {{ selection.description }}

“选择”基本上是JSON对象。

如果我将defaultOptionId更改为其他名称，则此方法有效。 但是，如果要在用户选择单选按钮时更新JSON对象，则必须将v-model添加到输入字段，如下所示：

<p v-for="(selection, index) in choice.selections">
     <input v-if="choice.defaultOptionId === selection.selectionId" type="radio" :name="'option_' + choice.choiceId" :value="selection.selectionId" v-model="choice.selectedOptionId" checked></input>
     <input v-else type="radio" :name="'option_' + choice.choiceId" :value="selection.selectionId" v-model="choice.selectedOptionId"></input>
        {{ index+1 }}. {{ selection.description }}

因此，具有“已检查”属性的单选按钮不起作用。它会检查第一个选项，即使我更改了“ defaultOptionId”，它也不在乎。

基本上，我想用不同的'defaultOptionId'加载不同的JSON文件，当用户选择单选按钮时，它会更改单选按钮WHILE的默认检查。它会更新JSON文件的'selectedOptionId'。分开工作，但不能一起工作。我必须使用此设计，因为其他模板也遵循相同的设计。

Answer 1

很难理解您要执行的操作以及问题所在，因为问题看上去很糟，但是无论如何我都会尽力帮助。

演示：

以下是有关您的数据的有效示例：

https://codepen.io/AlekseiHoffman/pen/XWJmpod?editors=1010

模板：

<div id="app">
  <div v-for="(selection, index) in choice.selections">
    <input 
      type="radio" 
      :id="selection.id" 
      :value="selection.selectionId" 
      v-model="choice.selected"
    >
    <label>
      {{selection.description}}
    </label>
  </div>

  <div>
    Selected: {{ choice.selected }}
  </div>
</div>

脚本：

choice: { 
  "id": 1,
  "selected": 2,
  "selections": [
    {
      "selectionId": 1,
      "description": "Radio One"
    },
    {
      "selectionId": 2,
      "description": "Radio Two"
    }
  ]
}

我简化了JSON对象，因为在那里不需要其他属性即可使它工作。

让我知道您是否仍然在执行任务时遇到困难。

Vue单选按钮v-if与v-model

1 个答案:

演示：

模板：

脚本：