SoFunction
Updated on 2025-04-06

Share tips on using vue element and nuxt

Time to select the format of submitting

For example

Fri Sep 07 2018 00:00:00 GMT+0800 (China Standard Time)
Convert to 2020-01-11Format

This record adds a sentence value-format=”yyyy-MM-dd” to datepicker

<el-date-picker type="date" v-model="createdate" @change="formatTime" value-format="yyyy-MM-dd" placeholder="Select time"></el-date-picker>

2. The problem cannot be selected when the check box is dynamically looped

[index].((item)=>{
  this.$set(item, 'checked', false); ---usevueofsetAttribute assignment
})

-form dynamic form verification (bugs caused by v-if and v-show to cause verification failure)

When using v-if or v-show to control the display and hiding of el-form-item, a check failure bug will occur.

When using v-if: element to verify rules binding to child components with prop attributes in form form, it is mounted during the vue declaration cycle. The elements used by v-if to switch will be destroyed, resulting in the form items in v-if. Since they were not rendered during the mounted period, the rules did not have any rules.

There is a binding. When initializing, the rules will not be generated, resulting in the subsequent switching of the conditions, and the verification of the displayed input box will not take effect. Use v-show: All rules will be generated during initialization, and even if hidden, the rules will be checked.

Solution
(1) Use v-if for verification. Configure a different key value after each v-if, so that's it

(2) Customize the verification rules. Those who like to do it can customize the verification by themselves

4. How to add Devtools tool in nuxt

The following must be added to:

vue: {
 config: {
  productionTip: false,
  devtools: true
 }
}

The above is the detailed content shared by the skills of using vue element and nuxt. For more information about vue about element and nuxt, please follow my other related articles!