时间戳

首页 > 解决方案 > 使用 Nuxt 2 组合 API 来获取模板 refs 数组

javascript - 使用 Nuxt 2 组合 API 来获取模板 refs 数组

问题描述

我正在尝试获取不在v-for. 我@nuxtjs/composition-api在 Nuxt 2 上使用。

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

这在 vue 2 上听起来太容易了，因为$refs当一个或多个组件在 html 上具有相同的引用名称时，它就变成了一个数组。然而，这对于组合 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 个项目。

怎么了？

标签： javascriptvue.jsnuxt.jsvue-composition-api

解决方案

Nuxt 2 基于 Vue 2，它只接受ref属性的字符串。您链接的文档实际上是指 Vue 3 for 中的新行为ref，其中也接受了函数。

Nuxt 2 中的模板引用的工作方式与使用 Composition API 的 Vue 2 中的工作方式相同：当 aref在 a 内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>

演示

并且setup()不提供对 的访问$refs，因为模板引用必须ref在 Composition API中显式声明为响应式。

推荐阅读