API композиции Vue2 + - динамические ссылки на шаблоны

Я использую 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 ;-(

Может кто-нибудь, пожалуйста, скажите мне, где я ошибаюсь? Спасибо.


person user2115620    schedule 02.02.2021    source источник


Ответы (1)


Похоже, vue-композиция-api (vue2) не поддерживает синтаксис: ref. Взгляните на https://github.com/vuejs/composition-api#limitations

Здесь должно быть очень полезно предупреждение.

person user3657624    schedule 02.02.2021
comment
Большое спасибо, жаль, что я не знал об этом раньше, прежде чем тратить часы, пытаясь заставить его работать; ( - person user2115620; 03.02.2021