Share the skills of using vue element and nuxt

  • 2021-10-24 18:45:51
  • OfStack

1. Format conversion of time selection submission of 1. element

For example


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

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=" Choose time "></el-date-picker>

2. The question cannot be selected when the Dynamic Loop check box


this.menulist[index].sonList.map((item)=>{
  this.$set(item, 'checked', false); --- Use vue Adj. set Attribute assignment 
})

3. el-form Dynamic Form Verification (v-if, v-show Causing Verification Failure bug)

When v-if or v-show is used to control the display and hiding of el-form-item, bug with verification failure occurs.

When using v-if: element to validate the rule binding for the subcomponent of the form form with the prop attribute, it is done in the vue declaration cycle mounted. The elements used to switch between v-if will be destroyed, which leads to the form items in v-if. Because they were not rendered during mounted, there are no rules

There is a binding. Rules that do not meet the display criteria during initialization will not be generated, resulting in later switching of conditions. Verification of the displayed input box will not take effect. Use v-show: All rules will be generated during initialization, and rule verification will be performed even if hidden

Solution
(1) Use v-if to verify each v-if is followed by a different key value, and that's it

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

4. How to add Devtools tools to nuxt

You must add the following to nuxt. config. js:


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

The above is vue element and nuxt use skills to share the details, more about vue about element and nuxt information please pay attention to other related articles on this site!


Related articles: