javascript - 在vuejs中创建/w v-for时如何默认选择单选按钮？

Question

我正在使用 v-for 语句渲染 vuejs 中的单选按钮元素。我希望默认选中第一个按钮。

HTML
<div v-for="(course, index) in courses" :key="index">
    <input
        v-model="selectedCourse"
        v-bind:value="course"
        type="radio"
        name="course"
    />
    <label>{{course}}</label>
</div>


JavaScipt
data() {
    return {
        courses: [course1, course2]
    }
}

我希望检查第一个单选按钮。

Answer 1

由于您使用的是 v-model，因此您必须将绑定(bind)的 data 属性设置为 courses 数组中的第一项。

this.selectedCourse = this.courses[0];

如果您知道 courses 数组中第一项的值，您还可以从一开始就设置 selectedCourse。

data() {
  return {
    courses: ['course1', 'course2'],
    selectedCourse: 'course1'
  };
}