使用 Nuxt 2 组合 API 来获取模板 refs 数组答案

【问题标题】：Composition API with Nuxt 2 to get template refs array使用 Nuxt 2 组合 API 来获取模板 refs 数组
【发布时间】：2021-05-26 12:59:19
【问题描述】：

我正在尝试获取不在v-for 中的元素引用数组。我在 Nuxt 2 上使用 @nuxtjs/composition-api。

（真相：我想做一个输入元素数组，这样我可以在提交之前对它们进行验证）

这在 vue 2 上听起来太容易了，因为当一个或多个组件在 html 上具有相同的引用名称时，$refs 变成了一个数组。然而，这对于组合 API 来说听起来并不简单，并且试图用它来执行简单的任务让我长期陷入困境。

因此，为了处理这种情况，我创建了 1 个可组合函数。（来源：https://v3.vuejs.org/guide/migration/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
  }
}

这是我的vue 文件：

<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>

现在，当我运行此文件时，我看不到任何 adding item ref 日志。点击一个按钮，我正在记录input。 itemRefs 数组中有 0 项。

怎么了？

【问题讨论】：

itemRefs = [] 不正确，因为您重新分配了局部变量。将其设为ref，并且永远不要重新分配。
@EstusFlask 引用并使用了itemRefs.value.push，但仍然无法正常工作

标签： javascript vue.js nuxt.js vue-composition-api

【解决方案1】：

Nuxt 2 基于 Vue 2，它只接受 ref attribute 的字符串。 docs you linked 实际上是指 Vue 3 中 ref, where functions are also accepted 的新行为。

Nuxt 2 中的模板引用的工作方式与使用 Composition API 在 Vue 2 中的工作方式相同：当 ref 位于 v-for 内时，ref 变为数组：

<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

而setup() 不提供对$refs 的访问权限，如template refs must be explicitly declared as reactive refs in Composition API。

【讨论】：