Sharing tips on using vue element and nuxt

1. Element time selection submission format conversion

For example

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

This record adds a sentence value-format="yyyy-MM-dd" to the 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 of not being able to select the checkbox when dynamically looping

this.menulist[index].sonList.map((item)=>{
  this.$set(item, 'checked', false); ---Use Vue's set attribute to assign a value})

3.el-form dynamic form verification (v-if, v-show cause verification failure bug)

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

When using v-if:element to bind validation rules to subcomponents with prop attributes in the form, it is completed in the vue declaration cycle mounted. The elements used by v-if to switch will be destroyed, resulting in the form items in v-if not being rendered during the mounted period, so the rules are not

There is binding. At initialization, rules that do not meet the display conditions will not be generated, resulting in the subsequent switching of conditions, and the verification of the displayed input box will not take effect. Use v-show: All rules will be generated at initialization, and rule verification will be performed even if they are hidden.

Solution (1): Use v-if to verify. Configure a different key value after each v-if.

(2) Customized validation rules. If you like to do it yourself, you can customize the validation yourself.

4. How to add Devtools to nuxt

The following must be added to nuxt.config.js:

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

The above is the detailed content of sharing the usage tips of vue element and nuxt. For more information about vue element and nuxt, please pay attention to other related articles on 123WORDPRESS.COM!