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再帰コンポーネントの簡単な使用例

推薦する

Vueはスクロールロードテーブルを実装します

目次成果を達成する転がり荷重知識備蓄コンポーネントのパッケージ1. コンポーネントの命名2. 小道具...

史上最も簡単な MySQL データのバックアップと復元のチュートリアル (パート 2) (パート 37)

データのバックアップと復元パート3の詳細は次のとおりです基本的な概念:バックアップ、現在のデータまた...

ElementUI コンポーネント el-dropdown (落とし穴)

選択して変更: クリックすると現在の値が表示され、ページ UI が表示され、CSS スタイルが変更さ...

Linux での MySQL 5.7.18 バイナリ パッケージのインストール チュートリアル (デフォルトの構成ファイル my_default.cnf なし)

現在、MySQL を学習中です。私は完全な初心者で、Linux についてはあまり知りません。今後の作...

JavaScript はスローモーションアニメーションのカプセル化と使用法を説明します

プロセス分析の実装(1)繰り返して電話をかけるには?答え: 関数をカプセル化して一度だけ呼び出すコー...

MySQL のデータの偶発的な削除の解決策と kill ステートメントの原則

mysql が誤ってデータを削除しました削除ステートメントを使用して誤ってデータ行を削除する誤ってデ...

8桁の割引コードをランダムに生成し、MySQLデータベースに保存します。

現在、多くの企業が割引コードを通じてプロモーションを行っています。今では、8桁の割引コードを実装して...

VMware で Centos7 ブリッジ ネットワークを構成する手順の詳細な説明

VMware仮想マシンでのCentos7ブリッジネットワーク構成の完全な手順は参考用です。具体的な内...

Vue はインターフェースのスライド効果を実装します

この記事では、インターフェースのスライド効果を実現するためのVueの具体的なコードを例として紹介しま...

CentOS 7 でソースコードから Openssh をインストールする方法

環境: CentOS 7.1.1503 最小インストール依存パッケージをダウンロードします: yum...

統計量に対するmySql SQLクエリ操作

余計なことは言わないで、コードだけ見てみましょう〜 プロジェクト番号を選択、 sum(case wh...

Vue プロジェクトで垂直テーブルを 2 つの方法で実装するアイデアの分析

問題の説明私たちのプロジェクトでは、水平方向のテーブルが一般的ですが、必要に応じて垂直方向のテーブル...

チェックボックスの不確定プロパティの使用の紹介

Windows XP でフォルダーのプロパティ ダイアログ ボックスを使用すると、フォルダーの属性カ...

Linux で libudev を使用して USB デバイスの VID と PID を取得する方法

この記事では、libudev ライブラリを使用して hidraw デバイスにアクセスします。 lib...

Vue における属性とプロパティの具体的な使用法と違い

目次Vue.jsにおける属性とプロパティ値および関連する処理として属性とプロパティの概念属性とプロパ...