[Vuejs]-Vue radio button v-if with v-model

by

0👍

It’s difficult to understand what you’re trying to do and what the problem is because the question looks like a mess, but I’ll try to help anyway.

Demo:

Here’s a working example with your data:

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

Template:

<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>

Script:

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

I simplified the JSON object since the other properties are not needed there to make it work.

Let me know if you’re still having difficulties with your task.

Leave a comment