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

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の他の関連記事もぜひご覧ください!

以下もご興味があるかもしれません:
  • Vueプロジェクトでlessを使用するためのヒント
  • 22 Vue 最適化のヒント (プロジェクトの実践)
  • Vue.js パフォーマンス最適化 N 個のヒント (収集する価値あり)
  • Vueプロジェクトでよく使われる実践的なスキルのまとめ
  • Vue Router の 10 の高度なヒントのまとめ
  • 読めばわかるVueの8つのヒント
  • Vue 開発における一般的なルーチンとテクニックの概要
  • Vue関数コンポーネントの使用に関する簡単な説明
  • Vue.js でより良い v-for ループを書くための 6 つのヒント
  • 知っておくべき 25 の Vue のヒント

<<:  ランダムロールコールテーブルを実装するためのネイティブJavaScript

>>:  Vue再帰コンポーネントの簡単な使用例

推薦する

JavaScript配列の一般的なメソッドの詳細な説明

目次元の配列を変更しない方法1. 連結文法:パラメータ:戻り値: 2. 参加する文法:パラメータ:戻...

MySQL トリガーの紹介、トリガーの作成、使用制限の分析

この記事では、例を使用して、MySQL トリガーの概要、トリガーの作成方法、およびトリガーの使用上の...

JavaScript 円グラフの例

描画効果実装コードJavaScript var キャンバス = document.getElemen...

一定時間後にNavicatがデータベースから自動的に切断される問題の解決方法

これは、データベース サーバーが、接続が多すぎるのを避けるために、一定時間非アクティブな状態が続くと...

Mysql関数呼び出しの最適化の詳細な説明

目次関数呼び出しの最適化関数呼び出しの最適化MySQL 関数は、内部的に決定論的または非決定論的とし...

デザイン: 意志の強いデザイナー

<br />長年の専門的なアートデザイン教育を通じて「美とは何か」を学びましたが、「美を...

MySQL インデックス障害の上位 10 の問題の概要

目次背景1. クエリ条件に「or」が含まれているため、インデックスが失敗する可能性があります。 2....

nginx リバース プロキシの魔法のスラッシュについての簡単な説明

nginx リバース プロキシを設定する場合、location と proxy_pass のスラッシ...

JavaScript の静的スコープと動的スコープを例を使って説明します

目次序文静的スコープと動的スコープ静的スコープ実行プロセス動的スコープ実行プロセスエクササイズ練習1...

Vue 仮想 DOM の問題について

目次1. 仮想DOMとは何ですか? 2. 仮想 DOM が必要な理由3. 仮想DOMはどのようにして...

ウェブ開発者やデザイナーにとって欠かせないオンラインウェブツールとアプリケーション

これまでの記事で、フロントエンド開発者にとって必須のツール、スクリプト、リソースのコレクションを紹介...

MySQL 8.0.15 のインストールと設定のグラフィックチュートリアル

この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...

Centos7 で MySQL マスター スレーブ サーバーを構築する方法 (グラフィック チュートリアル)

この記事では主に CentOS 上で MySQL マスタースレーブサーバーを構築する方法を紹介します...

LinuxでのDockerのインストールチュートリアル

Docker パッケージは、デフォルトの CentOS-Extras リポジトリにすでに含まれていま...