javascript - VueJS 2 v-for表单输入单选按钮检查属性不起作用

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的默认值设置为所需的检查值。

在循环中仅使用一个输入:

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