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 クイックインストール

推薦する

LeetCode の SQL 実装 (175. 2 つのテーブルの結合)

[LeetCode] 175.2つのテーブルを結合する表: 人物+-------------+--...

MySQL マスタースレーブレプリケーションの実装手順

目次mysql マスタースレーブレプリケーションMySQL マスタースレーブレプリケーション方式My...

フラッシュコンテンツの表示に使用される OBJECT タグと EMBED タグの違いの紹介

1. はじめに:ウェブページにフラッシュ コンテンツを正常に表示したい場合は、ページ上のフラッシュ ...

CentOS 7 での Nginx ログタイミング分割の実装手順の詳細説明

1. 分割スクリプト (splitNginxLog.sh) を作成します。 * この例では、ログ分割...

MySQL データベースの制約とデータ テーブルの設計原則

目次1. データベースの制約1.1 はじめに1.2 制約の種類1.3 ヌルでない1.4 ユニーク1....

MySQLはイベントを使用してスケジュールされたタスクを完了します

イベントでは、SQL コードを 1 回または一定の間隔で実行することを指定できます。通常、複雑な S...

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

MySQL-8.0.22-winx64のデータベースインストールチュートリアルは参考になります。具体...

MYSQL トランザクション チュートリアル Yii2.0 マーチャント引き出し機能

序文私はプログラマーとしてスタートした PHP プログラマーです。これまで、トレーニング コースで勉...

Tomcat maxPostSize設定実装プロセス分析

1. maxPostSize を設定する理由は何ですか? tomcat コンテナには送信データのサイ...

VMware Workstation 15 Pro インストール ガイド (初心者向け)

01. VMware Workstation Pro 15 のダウンロードダウンロード: VMwa...

Celery と Docker を使用して Django で定期的なタスクを処理する方法

Django アプリケーションを構築して拡張していくと、必然的に特定のタスクをバックグラウンドで自動...

Docker が占有するディスク領域をクリーンアップする方法

Docker は多くのスペースを占有します。コンテナを実行したり、イメージを取得したり、アプリケー...

Reactのヒントはフックの依存関係の問題を解消する方法を教えます

reactプロジェクトで非常に一般的なシナリオ: const [watchValue、setWatc...

Ubuntuがネットワークに接続できない場合の解決策

仮想マシン内の Ubuntu がネットワークに接続できない場合の効果的な解決策: 1. Ubuntu...

element-uiのアップロードコンポーネントでファイルやその他のパラメータを転送する際の問題を分析する

最近、element-ui を統合したプロジェクトで vuethink を使用しました。以前は bo...