VueJS 2 v-for form input radio-buttons checked attribute not working

Question

I have no idea why this is not working. I check if the index I have reached is 0 if it is, set the input box value to checked. Otherwise, don't. It seems like a VERY simple thing to do, but I cannot fathom why this is broken?

VueJS:

<div class="large-6 columns">
  <h5 class="subheader">Standard templates</h5>
  <div>
    <form>
      <template v-for="(template, index) in systemTemplates">
        <input type="radio" v-bind:id="template.reportId" v-bind:value="template.reportId" v-model="selectedTemplate" v-if="index == 0" checked />
        <input type="radio" v-bind:id="template.reportId" v-bind:value="template.reportId" v-model="selectedTemplate" v-else />
        <label v-bind:for="template.reportId">{{template.title | sanitizeStr}}</label>
      </template>
    </form>
  </div>
</div>

Image of visual result:

rendered DOM elements:

<div class="large-6 columns">
  <h5 class="subheader">
    Standard skabeloner
  </h5>
  <div>
    <form>
      <input type="radio" id="59a92aafae7a711b3890174e" checked="checked" value="59a92aafae7a711b3890174e">
      <label for="59a92aafae7a711b3890174e">Default PDF report</label>
      <input type="radio" id="59a92aafae7a711b38901753" value="59a92aafae7a711b38901753">
      <label for="59a92aafae7a711b38901753">Default Repeater template: 2 C...</label>
      <input type="radio" id="59a92aafae7a711b38901758" value="59a92aafae7a711b38901758">
      <label for="59a92aafae7a711b38901758">Default PDF with Map</label>
      <input type="radio" id="59a92aafae7a711b38901759" value="59a92aafae7a711b38901759">
      <label for="59a92aafae7a711b38901759">Default Repeater template: 2 C...</label>
      <input type="radio" id="59a92aafae7a711b3890175f" value="59a92aafae7a711b3890175f">
      <label for="59a92aafae7a711b3890175f">Niras standard PDF</label>
      <input type="radio" id="59a92aafae7a711b38901760" value="59a92aafae7a711b38901760">
      <label for="59a92aafae7a711b38901760">Niras standard PDF m. forside</label>
    </form>
  </div>
</div>

are you using radio buttons like checkboxes because you like the look of radio buttons? just wondering, because that's not how radio buttons are used :p — Jaromanda X
– Jaromanda X, Commented Mar 10, 2020 at 10:17
I am using radio buttons as a single selection option for selecting a PDF Template for a user to export their data into :) — IncrediblePony
– IncrediblePony, Commented Mar 10, 2020 at 10:20
extra note - I am not the one who developed this product :P I have become the maintainer :) — IncrediblePony
– IncrediblePony, Commented Mar 10, 2020 at 10:21
You realise that's a poor choice, since once selected, the radio button can't be cleared, since each is the only one in it's "radio group" — Jaromanda X
– Jaromanda X, Commented Mar 10, 2020 at 10:26
yes, your output html - jsfiddle.net/5y8hLnm0 - try unchecking an option after it's checked — Jaromanda X
– Jaromanda X, Commented Mar 10, 2020 at 10:42

Finrod · Accepted Answer · 2020-03-10 10:14:33Z

1

When using v-model, you should not use the checked attribute, but set the default value of the v-model to the desired checked value.

Use only one input in your loop:

<template v-for="(template, index) in systemTemplates">
  <input type="radio" v-bind:id="template.reportId" v-bind:value="template.reportId" v-model="selectedTemplate" />
  <label v-bind:for="template.reportId">{{template.title | sanitizeStr}}</label>
</template>

And set selectedTemplate default value to systemTemplates[0].reportId:

data() {
  return {
    selectedTemplate: this.systemTemplates[0].reportId
  }
}

answered Mar 10, 2020 at 10:14

Finrod

2,5504 gold badges31 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS 2 v-for form input radio-buttons checked attribute not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related