保持VueJS片段DRY

Question

我有以下Vue HTML.我知道这可以用其他模块完成,但除非需要,否则我不想使用.我在客户填写的表单中有一个选择,其中包含select每天的开始和结束时间.显然这可能是多余的,因为我将列出所有小时(在我的情况下每15分钟)作为options每天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>