Vue 要素と Nuxt の使用に関するヒントを共有する

1. 要素時間選択提出フォーマット変換

例えば

2018年9月7日金曜日 00:00:00 GMT+0800 (中国標準時)
2020-01-11 形式に変換されました

このレコードは、日付ピッカーに value-format="yyyy-MM-dd" という文を追加します。

<el-date-picker type="date" v-model="createdate" @change="formatTime" value-format="yyyy-MM-dd" placeholder="時間を選択"></el-date-picker>

2. 動的ループ時にチェックボックスを選択できない問題

this.menulist[index].sonList.map((item)=>{
  this.$set(item, 'checked', false); --- 値を割り当てるには、Vue の set 属性を使用します})

3.el-form 動的フォーム検証 (v-if、v-show による検証失敗のバグ)

v-if または v-show を使用して el-form-item の表示と非表示を制御すると、検証失敗のバグが発生します。

v-if:element を使用して、フォーム内の prop 属性を持つサブコンポーネントに検証ルールをバインドすると、マウントされた vue 宣言サイクルで完了します。 v-ifが切り替えに使用する要素は破棄され、マウント期間中はv-ifのフォーム項目がレンダリングされないため、ルールは適用されません。

拘束力があります。初期化時に表示条件を満たさないルールは生成されず、その後の条件の切り替えが発生し、表示された入力ボックスの検証は有効になりません。 v-show を使用: 初期化時にすべてのルールが生成され、非表示であってもルールの検証が行われます。

解決策 (1): v-if を使用して検証します。各 v-if の後に異なるキー値を設定します。

（2）カスタマイズされた検証ルール。自分で検証をカスタマイズすることもできます。

4. NuxtにDevtoolsを追加する方法

nuxt.config.js に以下を追加する必要があります。

ビュー: {
 設定: {
  生産のヒント: false、
  開発ツール: true
 }
}

以上がvue elementとnuxtの使い方のヒントをシェアする詳しい内容です。vue elementとnuxtについてさらに詳しく知りたい方は、123WORDPRESS.COMの他の関連記事もぜひご覧ください！