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

推薦する

両側にCSS固定レイアウト、中央に適応レイアウトを実装

フローティング、フローティング埋め込み div、配置、フレックスという 4 つの一般的な方法と原則を...

jQueryはショッピングカート機能を実装します

この記事の例では、ショッピングカート機能を実装するためのjQueryの具体的なコードを参考までに共有...

Apache Log4j2 が核レベルの脆弱性と迅速な修正を報告

Apache Log4j2 が核レベルの脆弱性を報告し、スタックリーダーの友人たちは大騒ぎになりまし...

MySQL の集計関数 count の使用法とパフォーマンスの最適化テクニック

この記事の環境はWindows 10、MySQLのバージョンは5.7.12-logです1. 基本的な...

HTML ページジャンプとパラメータ転送の問題

HTMLページジャンプ: window.open(url, "", "...

CentOS 8で自動更新を設定するための手順を完了する

データとコンピューターに対してできる最善のことは、それらを安全に保つことです。アップデートを有効にす...

MySQL マスタースレーブレプリケーションの原理からインストールと設定までを包括的に解説します。

マスタースレーブレプリケーションがなぜ必要なのでしょうか? 1. 複雑な業務システムでは、SQL 文...

MySql ビュー トリガー ストアド プロシージャの詳細な説明

ビュー:一時テーブルを繰り返し使用する場合、将来の使用を容易にするために別名を付けることができます。...

Vuex全体のケースの詳細な説明

目次1. はじめに2. 利点3. 使用手順1. Vuexをインストールする2. Vuexを参照する3...

CSS3 の transition、transform、translate の違いと機能の簡単な分析

変換して翻訳するTransform は、変換と変形を意味します。他の幅属性や高さ属性と同様に、CSS...

Vue3 を使用してアップロード コンポーネントを実装するためのサンプル コード

目次一般的なアップロードコンポーネントの開発以下の機能を実装する必要がありますカスタムテンプレートサ...

5分でDockerをインストールする詳細な手順

CentOS に Docker をインストールするには、オペレーティング システムが CentOS ...

Linux で scp コマンドを使用してファイルをリモートでコピーする方法の詳細な説明

序文scp は secure copy の略です。scp は、Linux システムの ssh ログイ...

JavaScript 上級プログラミング: 変数とスコープ

目次1. 元の値と参照値2. インスタンス3. 範囲1. 元の値と参照値6 つの単純なデータ型の値は...

Dockerリポジトリの一般的なコマンドの詳細な説明

ログイン dockerログインdocker login コマンドを実行し、ユーザー名、パスワード、メ...