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>

标签： javascripthtmlvuejs2

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