VueJS 2 v-для переключателя ввода формы отмечен атрибут не работает

Question

Понятия не имею, почему это не работает. Я проверяю, равен ли достигнутый мной индекс 0, если это так, установите значение в поле ввода на флажок. В противном случае нет. Это кажется ОЧЕНЬ простой вещью, но я не могу понять, почему она сломана?

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>

---

Изображение визуального результата:

---

визуализированные элементы DOM:

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

Answer 1

При использовании v-model вы не должны использовать атрибут checked, но установите значение по умолчанию v-model на желаемое проверенное значение.

Используйте только один вход в вашем l oop:

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

И установить selectedTemplate значение по умолчанию systemTemplates[0].reportId:

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