动态更改vue.js中的选择选项更改显示值

Question

我已经为select创建了一个自定义组件，它以15分钟为间隔显示一天的所有时间。我还可以传递一个可选的min-start-time值。在我的html中，我使用了其中的两个组件。我已经将该组件定义为

Vue.component('time-select', {
   template: `
    <select :value="value" 
      ref= 'input'
      v-on:input="onChange($event.target.value)">
        <option value=""> {{firstOption}} </option>
        <option v-for="t in getHours()" :value="t">
          {{ t }}
        </option>
    </select>
 `,
 props: {
    value: String,
    startTime: String,
    firstOption: {
      type: String,
      default: "Select"
    },
    step: {
      type: Number,
      default: 15
    }
 },
 methods: {
   getHours: function() {    
      var startHr = 0;
      var startMin = 0;
      if (this.startTime) {
         var timeParts = this.startTime.split(/[\s:]+/);
         startHr = parseInt(timeParts[0]);
         startMin = parseInt(timeParts[1]);    
         var ampm = timeParts[2];
         if(ampm == "PM" && startHr < 12)
           startHr = startHr + 12;
         else if(ampm == "AM" && startHr === 12)
           startHr = startHr - 12;
     }      

     var hours = [];
     var start = new Date(1,1,1,startHr,startMin);  
     var end = new Date(1,1,2,0,0);
     if(this.startTime)
     {
        start.setMinutes(start.getMinutes() + this.step);
     }
     for (var d = start; d < end; d.setMinutes(d.getMinutes() + this.step)) 
     {          
        hours.push(this.format(d));
     }

      return hours;
   },
   format: function(date)
   {
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var ampm = hours < 12? "AM" : (hours=hours%12,"PM");
      hours =  hours == 0? 12 : hours < 10? ("0" + hours) : hours;
      minutes = minutes < 10 ? ("0" + minutes) : minutes;
      var ret = hours + ":" + minutes + " " + ampm;
      return ret;
   },
   onChange: function(val) {
      this.$emit('input', val);
   },
}
});

JsFiddle链接为https://jsfiddle.net/xsnswxu1/1/

现在，如果您从第一个下拉列表中选择任何值(例如01:30 am)，从第二个下拉列表中选择任何值(例如03:30 am)，然后再次将第一个下拉列表的值更改为12:30 am，则第二个下拉列表的值将自动更改(在本例中为02:30 am)。不过，VM数据保持不变。当我更改第一个dropdown时，第二个dropdown值不应该被更改。知道我做错了什么吗。VM没有更新，这很好，但是如果我更改了第一个下拉列表，第二个下拉列表显示值就会发生变化。

Answer 1

每当使用v-for进行迭代时，都应该添加一个key属性。

当Vue更新使用v-

呈现的元素列表时，它默认使用“就地补丁”策略。如果数据项的顺序已更改，则Vue将简单地就地修补每个元素，并确保它反映在该特定索引处应该呈现的内容，而不是移动DOM元素以匹配项的顺序。

如果您将模板更改为以下内容，它应该会以您期望的方式工作。

<select :value="value" 
  ref= 'input'
  v-on:input="onChange($event.target.value)">
  <option value=""> {{firstOption}} </option>
  <option v-for="t in getHours()" :value="t" :key="t">
    {{ t }}
  </option>
</select>

已更新fiddle。

然而，代码仍然有一个bug。如果您选择一个开始日期和结束日期，然后选择一个使结束日期无效的开始日期(因为现在开始在结束日期之后开始)，那么您的Vue (您所说的vm)将包含一个无效的结束日期，即使结束日期选择列表看起来选定的结束日期已被清除。这就是为什么我在上面建议在开始日期更改时清除结束日期。如果不这样做，则每当开始日期更改时，都需要检查结束日期的有效性。