vue3はvに動的参照を設定します-無効な場合と解決策

冗長になるのが不安な友達は最終コードを直接見ることができ、心配しない友達は内容が必要なものと同じかどうかを確認できます。

最近、10枚の画像をアップロードする必要がありました。各画像には異なる目的があります。アップロード後の各画像は、異なる特別な処理を経て、異なる div に配置される必要があるため、各画像を保存する必要があります。画像の各 div ref で設定され、画像のアップロード後に処理されます。これは、v-for ループ内の要素の動的な ref の設定という別の問題を引き起こします。なぜ v-for を使用するのでしょうか? 写真が10枚もあるので、いちいち書くのが面倒です。

私は当初、動的 ref は非常にシンプルであるべきだと考えていました。通常の動的プロパティと同じように記述するだけです。

<div
    v-for="(item, index) in imgListData"
    :key="item.id"
  >
    <div
      :ref="`imgContainer${index+1}`"
    ></div>
</div>

次に、次のように ts の値を取得します。

const imgContainer1: any = ref();
·
·
·
const imgContainer10: any = ref();

その結果、created で出力される imgContainer1.value は null になります。これは、v-for での動的参照の設定が無効であることを意味します。

実際、v-for にない場合、ref を設定するときに取得できる変数があります。

<div
  :ref="`imgContainer${refName}`"
></div>  

const refName = 'a';
const imgContainera: any = ref();

上記のコードは、作成された imgContainera.value を出力し、値を持っています。

では、v-for ループで動的 ref を設定するにはどうすればよいでしょうか? 私が使用した方法は最良ではないかもしれませんが、要素を取得できます。HTML コード:

<div
  v-for="(item, index) in imgListData"
  :key="item.id"
>
  <div
    :ref="(el: any) => setRef(el, index+1)"
  ></div>
</div>

TSコード:

<script lang="ts" setup>
// 设置动态 ref
  const setRef = (item: any, index: any) => {
    switch (index) {
      case 2:
        imgContainer2.value = item;
        break;
      case 3:
        imgContainer3.value = item;
        break;
      ···
      case 10:
        imgContainer10.value = item;
        break;
      default:
        imgContainer1.value = item;
    }
  };


const imgListData= reactive([   //  这个变量也可以用方法生成也可以直接定义
{
  id: 1,
   cname: '',
 },
 ...
 {
  id: 10,
   cname: '',
 },
]);

</script >

この記事があなたのお役に立てば幸いです。また、より詳しい人が私を批判し、修正してくれることを願っています。私はあなたにアドバイスをすることを躊躇しません。

vue3はvに動的参照を設定します-無効な場合と解決策

おすすめ