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数据保留相同。当我更改第一个下拉列表时，第二个下拉值不应该更改。知道我做错了什么。 VM未更新，这是好的，但如果我更改第一个下拉列表，第二个下拉显示值正在更改。

Answer 1

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

当Vue更新用v-for渲染的元素列表时，它依次为默认使用“就地补丁”策略。如果是数据的顺序项已更改，而不是移动DOM元素以匹配物品的顺序，Vue将简单地修补每个元素和确保它反映了应该在该特定情况下呈现的内容索引。

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

<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。

然而，代码仍然存在错误。如果您选择开始日期和结束日期，然后选择一个开始日期，使结束日期无效（因为开始现在在结束日期之后开始），那么您的Vue（你是什么＆＃39;重新调用vm）将包含无效的结束日期，即使结束日期选择列表看起来像所选的结束日期已被清除。这就是为什么我在上面建议在开始日期改变时清除结束日期的原因。如果不这样做，那么每当开始日期发生变化时，您都需要检查结束日期的有效性。

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

1 个答案: