Uniapp WeChatアプレット: キー障害の解決策

Uniapp WeChatアプレット: キー障害の解決策

ユニアプリコード

<テンプレート>
  <表示>
    <image v-for="(item, i) in fileList" :key="item[urlKey]" :src="item[urlKey]"></image>
  </ビュー>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    小道具: {
      urlKey: {デフォルト: 'url'},
      ファイルリスト: 配列
    }
  }
</スクリプト>

WeChatアプレットにコンパイルする

<表示>
  <block wx:for="{{fileList}}" wx:for-item="item" wx:for-index="i" wx:key="urlKey">
    <画像 src="{{item[urlKey]}}"></画像>
  </ブロック>
</ビュー>

key="item[urlKey]" という構文はサポートされていないようです

解決:

<テンプレート>
  <表示>
    <image v-for="(item, i) in fileList" :key="key(item)" :src="item[urlKey]"></image>
  </ビュー>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    小道具: {
      urlKey: {デフォルト: 'url'},
      ファイルリスト: 配列
    },
    計算: {
      鍵() {
        e => e[this.urlKey] を返します
      }
    }
  }
</スクリプト>

これは計算を使って解決できる

これで、uniapp WeChat アプレットに関するこの記事は終了です。キーの有効期限の問題の解決方法。uniapp アプレットのキーの有効期限に関する関連コンテンツの詳細については、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • uniappを使用してWeChatミニプログラムでEChartsを使用する方法
  • Uniapp WeChatアプレットは1ページに複数のカウントダウンを実現します
  • uniapp、WeChat アプレットで MQTT を使用する際の問題
  • WeChat アプレット uniapp は左スワイプによる削除効果を実現します (完全なコード)

<<:  LinuxでMySQLのリモートアクセス権を有効にし、ファイアウォールでポート3306を開きます。

>>:  フォアマン Ubuntu16 クイックインストール

推薦する

MySQLパスワード変更例の詳細な説明

MySQLパスワード変更例の詳細な説明長い間 MySQL を使用していませんでした。今日、MySQL...

Vue フロントエンドと Django バックエンドを使用して、一定期間内のデータをクエリする方法

序文開発プロセスでは、すべてのデータではなく特定の期間内のデータをクエリするなど、クエリのフィルタリ...

MySQL 単一テーブルクエリの例の詳細な説明

1. データを準備するこのテーブルでは次の操作が実行されます 学生テーブルを作成 ( id int ...

MySQLのnull値に関する小さな問題

今日、null 値をテストしていたところ、小さな問題が見つかりました。ここに記録しました。以前にも遭...

Linuxのテキスト処理コマンドsortの詳細な説明

テキストファイルの内容を並べ替える使用方法: ソート + オプション + ファイル名 (複数のファイ...

XHTML におけるタイトルタグと段落タグの使用に関する詳細な説明

XHTML 見出しの概要Word 文書を作成するときは、「第 1 章」、「1.2.1」などのタイトル...

Mybatis マッパー動的プロキシの原理の分析

序文動的プロキシの原理を説明する前に、まず、mybatis を統合した後の dao 層の 2 つの実...

LinuxにDockerをインストールする(非常に簡単なインストール方法)

最近、かなり暇です。大学4年生として数か月間インターンをしていました。インターンとして、Docker...

WeChatアプレットの入力ジッター問題を解決する方法

問題を見つけるまず問題を見てみましょう。ミニプログラムでは、Vant のダイアログ コンポーネント ...

Vue のトランジション効果とアニメーショントランジションの使用例の詳細な説明

目次遷移フック関数カスタム遷移クラス名遷移グループの使用まとめまずは例を見てみましょうコードは次のと...

HTML でスクロールバーを非表示にしたり削除したりする方法

1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...

Ubuntu 20.04 に MySql5.7 をインストールして構成するための詳細なチュートリアル

目次1. Ubuntuソースの変更2. MySQLをインストールする3. 新しいユーザーを作成し、権...

MySql 学習ノートにおけるトランザクション分離レベルの詳細な説明

背景トランザクションについて話すとき、誰もがそれに精通している必要があります。MySQL データベー...

Win10 に Tomcat サーバーをインストールし、環境変数を構成する詳細なチュートリアル (画像とテキスト)

目次JDKをダウンロードしてインストールするTomcat 圧縮パッケージをダウンロードTomcatの...

LinuxでDHCPサーバーを構築する方法

目次1. 基礎知識: 2. DHCPサーバーの設定: 1. サーバーのIPを確認する2. DHCP ...