javascript - 保持 VueJS 片段干燥

Question

我有以下 Vue HTML。我知道这可以通过其他模块来完成，但除非需要，否则我宁愿不使用。我在客户填写的表格中有一个选择，其中有一个 select 用于每天的开始和结束时间。显然，这可能会变得多余，因为我会将所有时间(在我的情况下为每 15 分钟)列为 option，每天 2 次，所有天 7 次。它最终变成了几百行代码......一个小时select......有没有更好的方法来保持这种干燥？我更喜欢把它放在 Vue 的土地上。或方法中的 JS 等...

<div class="col-xs-4">
  <select class="form-control" v-model="newPost.hours.sunday.opens">
    <option value="" selected>Opens:</option>
    <option value="12:00am">12:00am</option>
    <option value="12:15am">12:15am</option>
    <option value="12:30am">12:30am</option>
    <option value="12:45am">12:45am</option

...etc...etc x7

Answer 1

向您的组件添加一个包含所有时间的属性:

data() {
  return {
    times: ['12:00am', '12:15am', ...],
  }
}

然后在模板中使用v-for生成选项:

<select class="form-control" v-model="newPost.hours.sunday.opens">
  <option value="" selected>Opens:</option>
  <option v-for="time in times" :value="time">{{ time }}</option>
</select>