快捷導(dǎo)航

Vue3如何動態(tài)設(shè)置ref

更新時(shí)間：2024年12月26日 08:56:52 作者：-小龍人

文章介紹了在某些場景下,需要根據(jù)動態(tài)數(shù)據(jù)來設(shè)置ref,例如在表格中的輸入框需要聚焦時(shí),需要為每個(gè)輸入框設(shè)置一個(gè)ref,通過點(diǎn)擊編輯按鈕,可以自動聚焦到相應(yīng)的輸入框中

Vue3動態(tài)設(shè)置ref

介紹

在一些場景，ref設(shè)置是未知的需要根據(jù)動態(tài)數(shù)據(jù)來決定，如表格中的input框需要我們主動聚焦，就需要給每一個(gè)input設(shè)置一個(gè)ref，進(jìn)而進(jìn)行聚焦操作。

Demo

點(diǎn)擊下面截圖中的編輯按鈕，自動聚焦到相應(yīng)的輸入框中。

<template>
  <!-- 動態(tài)ref -->
  <div class="test_ref">
    <div v-for="item in 9" :key="item">
      <span>{{ item }}</span>

      <!-- 動態(tài)設(shè)置ref -->
      <el-input
        v-model="inputVal"
        placeholder="Please input"
        :ref="(el:refItem) => handleSetInputMap(el, item)"
      />

      <el-button type="primary" :icon="Edit" @click="handleEdit(item)" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Edit } from "@element-plus/icons-vue";
import { ComponentPublicInstance } from "vue";
type refItem = Element | ComponentPublicInstance | null;
const inputVal = ref();
const inputRefMap = ref({});

/** 編輯 */
const handleEdit = (item: number) => {
  // 若輸入框此時(shí)還沒有渲染出來，如先隱藏再觸發(fā)顯示 需要使用nextTick進(jìn)行聚焦
  inputRefMap.value[`Input_Ref_${item}`].input.focus();
};

/** 動態(tài)設(shè)置Input Ref */
const handleSetInputMap = (el: refItem, item: number) => {
  if (el) {
    inputRefMap.value[`Input_Ref_${item}`] = el;
  }
};
</script>

<style lang="scss" scoped>
.test_ref {
  padding: 50px;
  > div {
    width: 300px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
  }
}
</style>

效果

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解vue路由
這篇文章主要介紹了vue路由的相關(guān)資料，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)vue路由知識，感興趣的朋友可以了解下
2020-08-08
前端vue面試總問watch和computed區(qū)別及建議總結(jié)
在現(xiàn)代前端的面試中,vue和react是面試過程中基本必問的技術(shù)棧,其中Vue響應(yīng)式話題,watch和computed是面試官非常喜歡聊的主題,雖然watch和computed它們都用于監(jiān)聽數(shù)據(jù)的變化,但它們在實(shí)現(xiàn)原理、使用場景和行為上有著顯著的區(qū)別,本文將深入探討,并提供一些面試過程中的建議
2023-10-10
element?select必填項(xiàng)驗(yàn)證回顯問題的解決
本文主要介紹了element?select必填項(xiàng)驗(yàn)證回顯問題的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
Vue使用三種方法刷新頁面
這篇文章說明了如何使用Vue去刷新當(dāng)前頁面的多種方法實(shí)例,有完成的代碼提供參考,希望對你有所幫助
2021-06-06
vue 點(diǎn)擊按鈕實(shí)現(xiàn)動態(tài)掛載子組件的方法
今天小編就為大家分享一篇vue 點(diǎn)擊按鈕實(shí)現(xiàn)動態(tài)掛載子組件的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
詳解Vue監(jiān)聽數(shù)據(jù)變化原理
本篇文章主要介紹了Vue監(jiān)聽數(shù)據(jù)變化，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-03-03
Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker的示例
這篇文章主要介紹了Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker,文中給大家介紹了vue-baidu-api地圖標(biāo)記點(diǎn)（自定義標(biāo)記圖標(biāo)），設(shè)置標(biāo)記點(diǎn)的優(yōu)先級問題，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-08-08
vue+jquery+lodash實(shí)現(xiàn)滑動時(shí)頂部懸浮固定效果
這篇文章主要為大家詳細(xì)介紹了vue+jquery+lodash實(shí)現(xiàn)滑動時(shí)頂部懸浮固定效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-04-04
vue路由前進(jìn)后退動畫效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue路由前進(jìn)后退動畫效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-12-12
vue中關(guān)于checkbox使用的問題
這篇文章主要介紹了vue中關(guān)于checkbox使用的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05