Javascript 保持VueJS代码段干燥

我有以下Vue HTML。我知道这可以通过其他模块来实现，但除非需要，否则我宁愿不使用。我在客户填写的表格中有一个select，其中有一个

select

，用于记录每天的开始和结束时间。显然，这可能会变得多余，因为我会将所有时间（在我的情况下，每15分钟）列为

选项

s，每天2次，每天7次。最后是几百行代码…一个小时

select

。。。有没有更好的方法保持这个干燥？我宁愿把它留在Vue land。或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

打开：
上午12:00
上午12:15
上午12:30
12:45am将包含所有时间的属性添加到组件：

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>


打开：
{{time}}
可以将其作为数据属性传递，但我认为最好根据传递给时间选择器组件的开始时间来计算时间范围。您可以使用在组件中使用15分钟的步骤轻松创建时间。因此无需手动创建

然后还可以修改“结束”下拉列表，使其仅显示开始时间之后的时间。动态更新

并使用
v-for
在天数数组
['Monday'、'tuday'、…]上创建两个时间选择器组件循环

在应用程序组件中，我动态创建了空数据模型，因此您可以为每天准备对象

请看下面的演示或这个


moment.locale（'en'）；
常量时间选择器组件={
道具：{
日期：字符串，
描述：字符串，
选项：对象
},
模板：`
{{caption}}
{{time}}
`,
数据（）{
返回{
times:this.createTimes（），
所选时间：“”
}
},
观察：{
'选项。开始'（）{
this.times=this.createTimes（）；//重新创建时间
}
},
方法：{
时间改变{
console.log（'changed'，this.timeSelected）
this.$emit（'changed'，{day:this.day，selected:this.timeSelected}）；
},
createTimes（）{
//上午0:00至下午0:00
const formatStr='hh:mm a'；
让开始=时刻（this.options.start，formatStr）；
让range=this.options.hours；//8小时
让时间=新数组（范围*4+1）。填充（开始）；
console.log（开始，次数）；
返回时间.map（（项目，索引）=>{
返回（索引>0？item.add（15，'m'）：item）.format（formatStr）；
});
}
}
};
新Vue({
el:“#应用程序”，
数据（）{
返回{
天数：[
“周一”、“周二”、“周三”、“周四”、“周五”、“周六”、“周日”
],
开放选项：{
开始：“上午12:00”，
小时：24
},
关闭选项：{
开始：“上午12:00”，
小时：8
},
newPost：未定义
}
},
创建（）{
this.newPost=this.createEmptyPost（）；
},
方法：{
createEmptyPost（）{
设newPost={}；
此.days.forEach（（天）=>{
新邮[日]={
打开时间：未定义，
关闭时间：未定义
};
});
返回newPost；
},
关闭已更改（val）{
this.newPost[val.day].closingTime=val.selected；
},
打开已更改（val）{
控制台日志（val）；
this.newPost[val.day].openingTime=val.selected；
log（moment（val.selected，'hh:mm a'）.hour（））；
this.closeOptions.start=力矩（val.selected，'hh:mm a'）；
}
},
组成部分：{
计时器选择器：计时器选择器组件
}
});

{{day}}

{{newPost}}