Comment combiner plusieurs éléments ref() dans Vue3 ?

Question

J'ai plusieurs éléments similaires qui sont définis comme suit :

<script setup>
const el1 = ref()
const el2 = ref()
const el3 = ref()
</script>

<template>
<h1 ref="el1"></h1>
<h1 ref="el2"></h1>
<h1 ref="el3"></h1>
</template>

Je souhaite combiner tous les ref dans une nouvelle variable réactive et utiliser leurs attributs.

Quelle est la meilleure approche pour résoudre ce problème ?

Answer 1

L'exemple ci-dessous présente deux cas de figure, en v-for et par une fonction :ref (si vous devez combiner des éléments sans boucle) :

Vue SFC Playground

Docs : Refs inside v-for y Function Refs .

<script setup>
import { ref, onMounted } from 'vue';

const list = [1, 2, 3];
const listRefs = ref([]);

const titlesRefs = ref([]);

onMounted(() => {
  console.log(listRefs.value);
  console.log(titlesRefs.value);
})

</script>

<template>
  <h1 v-for="item in list" ref="listRefs">{{ item }}</h1>
  <hr>
  <h1 :ref="el => titlesRefs.push(el)">1</h1>
  <h2 :ref="el => titlesRefs.push(el)">2</h2>
  <h3 :ref="el => titlesRefs.push(el)">3</h3>
</template>

Answer 2

Pour passer en boucle sur plusieurs éléments, utilisez refs inside v-for .

Pour la jonction de plusieurs refs , utiliser réactif() :

• en <script>

  <script> import { reactive, toRefs } from 'vue'

  export default defineComponent({ setup() { const state = reactive({ el1: null, el2: null, el3: null }) return toRefs(state) // or return { ...toRefs(state), / moreStuff / }

  } }) </script>

• en <script setup>

Vous avez deux possibilités :

1. ne pas extraire (les utiliser comme state.el1 , state.el2 en <template /> )

   <script setup> const state = reactive({ el1: null, el2: null, el3: null }) onMounted(() => { console.log(state.el1) }) </script> <template> <h1 ref="state.el1"></h1> <h1 ref="state.el2"></h1> <h1 ref="state.el3"></h1> </template>

2. les extraire (en utilisant toRefs ) - Inconvénient : il faut spécifier chaque référence lors de l'extraction :

   <script setup> import { reactive, toRefs, onMounted } from 'vue' const state = reactive({ el1: null, el2: null, el3: null }) const { el1, el2, el3 } = toRefs(state) onMounted(() => { console.log(el1.value) console.log(state.el2) }) </script>

Le plus grand avantage de l'utilisation de reactive est que vous n'avez plus besoin d'utiliser .value à l'intérieur du script (Utiliser state.el1 dans les deux <script> y <template> .

Answer 3

Essayez ce qui suit et faites-moi savoir si c'est ce que vous essayez d'obtenir :)

<template>
  <div>
    <h1 ref="el1">Element 1</h1>
    <h1 ref="el2">Element 2</h1>
    <h1 ref="el3">Element 3</h1>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref } from 'vue';

const state = reactive({
  el1: ref(),
  el2: ref(),
  el3: ref(),
});

const { el1, el2, el3 } = toRefs(state);

console.log(el1, el2, el3);
// ObjectRefImpl {_object: Proxy(Object), _key: 'el1', _defaultValue: undefined, __v_isRef: true}
// ObjectRefImpl {_object: Proxy(Object), _key: 'el2', _defaultValue: undefined, __v_isRef: true}
// ObjectRefImpl {_object: Proxy(Object), _key: 'el3', _defaultValue: undefined, __v_isRef: true}
</script>

edit : si vous voulez faire une boucle dynamique, essayez ce qui suit

<template>
  <h1 v-for="el in refsArr" ref="el">{{ el._key }}</h1>
</template>

<script setup>
import { reactive, toRefs, ref } from 'vue';

const state = reactive({
  el1: ref(),
  el2: ref(),
  el3: ref(),
});

const refsObj = toRefs(state);

const refsArr = []
for (const key in refsObj) {
  refsArr.push(refsObj[key]);
}
</script>