Я использую Quasar (quasar.dev) с Vue2 + Composition API и пытаюсь получить доступ к элементам DOM с динамически генерируемыми свойствами v-bind: ref, следуя этой странице документации Vue3:
https://v3.vuejs.org/guide/composition-api-template-refs.html#usage-inside-v-for.
Это упрощенное представление проблемы с помощью codeandbox: https://codesandbox.io/s/suspicious-pine-90qgd?file=/src/components/MyOuterComponent.ts
Мой шаблон компонента (MyOuterComponent.vue):
<template>
<div>
<my-component
v-for="(item, i) in list"
v-bind:ref="
(el) => {
if (el) divs[i] = el
}
"
v-bind:key="i"
>
{{ item }}
</my-component>
</div>
</template>
<script src='./MyOuterComponent.ts' />
и мой сценарий для этого компонента:
import MyComponent from './MyComponent.vue'
import TMyComponent from './MyComponent'
import {
defineComponent,
onMounted,
ref,
reactive,
onBeforeUpdate
} from '@vue/composition-api'
export default defineComponent({
name: 'MyOuterComponent',
components: { MyComponent },
props: {},
setup(props, context) {
const list = reactive([1, 2, 3, 4, 5])
const divs = ref<InstanceType<typeof TMyComponent>[]>([])
// make sure to reset the refs before each update
onBeforeUpdate(() => {
divs.value = []
})
onMounted(() => {
context.root.$nextTick(() => {
console.log('THE COMPONENTs', divs, context.root.$refs)
divs.value.forEach((div) => {
console.log('My Div Ref: ', div)
})
})
})
return {
list,
divs
}
}
})
Как видно из документации, я ожидаю, что divs
будет заполнен ссылками на шаблон для моих динамически сгенерированных компонентов, что и должна делать эта строка в моем шаблоне:
v-bind:ref="(el) => { if (el) divs[i] = el }"
divs
остается пустым даже после входа в систему после nextTick. Я ожидаю увидеть там 5 элементов, ссылающихся на элементы DOM.
Если я изменю шаблон на:
<template>
<div>
<my-component
v-for="(item, i) in list"
v-bind:ref="item"
v-bind:key="i"
>
{{ item }}
</my-component>
</div>
</template>
<script src='./MyOuterComponent.ts' />
Я вижу ссылки в context.refs
, но мне сказали, что это свойство будет удалено в Vue3 ;-(
Может кто-нибудь, пожалуйста, скажите мне, где я ошибаюсь? Спасибо.