Composition API with Nuxt 2 to get template refs array

Question

I'm trying to get the array of element refs that are not in v-for. I'm using @nuxtjs/composition-api on Nuxt 2.

(Truth: I want to make an array of input elements, so that I can perform validations on them before submit)

This sounds too easy on vue 2 as $refs becomes an array when one or more compnents have the same ref name on html. However, this doesn't sound simple with composition api and trying to perform simple task with that got me stuck from long.

So to handle this scenario, I've created 1 composable function. (Soruce: https://v3-migration.vuejs.org/breaking-changes/array-refs.html#frontmatter-title)

// file: viewRefs.js

import { onBeforeUpdate, onUpdated } from '@nuxtjs/composition-api'
export default () => {
  let itemRefs = []
  const setItemRef = el => {
    console.log('adding item ref')
    if (el) {
      itemRefs.push(el)
    }
  }
  onBeforeUpdate(() => {
    itemRefs = []
  })
  onUpdated(() => {
    console.log(itemRefs)
  })
  return {
    itemRefs,
    setItemRef
  }
}

Here is my vue file:

<template>
  <div>
    <input :ref="input.setItemRef" />
    <input :ref="input.setItemRef" />
    <input :ref="input.setItemRef" />
    <input :ref="input.setItemRef" />
    <input :ref="input.setItemRef" />
    <input :ref="input.setItemRef" />
    // rest of my cool html
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  useRouter,
  ref
} from '@nuxtjs/composition-api'
import viewRefs from '~/composables/viewRefs'
export default defineComponent({
  setup() {

    const input = viewRefs()

    // awesome vue code here...
   
    return {
      input
    }
  }
})
</script>

Now when I run this file, I don't see any adding item ref logs. And on click of a button, I'm logging input. That has 0 items in the itemRefs array.

What's going wrong?

Answer 1

Nuxt 2 is based on Vue 2, which only accepts strings for the ref attribute. The docs you linked actually refer to new behavior in Vue 3 for ref, where functions are also accepted.

Template refs in Nuxt 2 work the same way as they do in Vue 2 with Composition API: When a ref is inside a v-for, the ref becomes an array:

<template>
  <div id="app">
    <button @click="logRefs">Log refs</button>
    <input v-for="i in 4" :key="i" ref="itemRef" />
  </div>
</template>

<script>
import { ref } from '@vue/composition-api'

export default {
  setup() {
    const itemRef = ref(null)
    return {
      itemRef,
      logRefs() {
        console.log(itemRef.value) // => array of inputs
      },
    }
  }
}
</script>

demo

And setup() does not provide access to $refs, as template refs must be explicitly declared as reactive refs in Composition API.