“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

Today, a member of the team encountered a nasty problem and handled it for a long time without any results. It is not difficult for you to find that there are many bugs in many components we used. The most common one I encountered was BootStrap, which has been deprecated. Let me take care of it!

Problem resolution

Here’s the question:

  • El-time-select changes the time value, but the view is not updated, the value is ok, it does not affect the data transmission and update, disgusting is that the user experience is very bad, will let the user think that this time can not be modified, will break the computer, then how to solve the final? Here’s how it works
<el-time-select v-model="form.TimeS" :picker-options="{ start: '00:00', step: '00:15', end: }" placeholder=" settling-time ">Copy the code

He found some online cases to test, the results are not satisfactory, step on these pits, you do not try, I give you a list of:

  • The $set() method mentioned here doesn’t work at all, and you need to bind @blur to make sure it triggers and then resets. It doesn’t work at all!
  • Use the reassignment method, if you try and find that the value does not change at all, even if you bind the ref on the component
<el-time-select v-model="form.TimeS" ref="TimeChange" :picker-options="{ start: '00:00', step: '00:15', end: }" placeholder=" settling-time ">Copy the code

This.$refs[‘TimeChange’].value = “;

  • You’re even more surprised that @chang doesn’t trigger, freezing ！！！！！

The solution

The cause of the problem?

Because the initial value of the V-Model bound within the El-time-Select component is defined in the form, view updates cannot be implemented, and we need to consider that this is a mandatory field when the form is submitted.Copy the code

The optimal solution

1, the value of the v-model is directly defined in the outermost layer of data.return. 2, you will find that your change method can be used. (You may have to ask why you insist on the change event, since only change can send back the selected value.Copy the code
template: <el-time-select @change="changeTimeS" v-model="startTime" ref="TimeChange" :picker-options="{ start: '00:00, step:' 00:15 'end:' 24:00 '} "placeholder =" start time "> < / el - time - select >Copy the code
Data (){return{startTime: "=" must be in the outermost layer}}Copy the code
ChangeTimeS (data){console.log(data) this.form.coursetimes = data = changeTimeS(data){console.log(data) this.form.coursetimes = data = changeTimeS(data){console.log(data) this.form.coursetimes = data = Log (this.$refs['TimeChange'].value) => same value as data},Copy the code

conclusion

You might say, “Well, it’s that simple in the end.” But you have to think about it. In the process of trying, you read other people’s articles, trying. This is your time cost, this method can not only update the view, you do not need to sit alone form validation, that will take more time, with the form’s own validation that you may be cool! Hope this simple method is useful to everyone, don’t try those useless posts again. The very, very essence is here