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