[英]Composition API with Nuxt 2 to get template refs array
I'm trying to get the array of element refs that are not in v-for
.我正在尝试获取不在
v-for
中的元素引用数组。 I'm using @nuxtjs/composition-api
on Nuxt 2.我在 Nuxt 2 上使用
@nuxtjs/composition-api
。
(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.这在 vue 2 上听起来太容易了,因为当 html 上的一个或多个组件具有相同的 ref 名称时,
$refs
变成了一个数组。 However, this doesn't sound simple with composition api and trying to perform simple task with that got me stuck from long.但是,这对于 api 的作曲听起来并不简单,并且尝试执行简单的任务让我长期陷入困境。
So to handle this scenario, I've created 1 composable function.因此,为了处理这种情况,我创建了 1 个可组合的 function。 (Soruce: https://v3.vuejs.org/guide/migration/array-refs.html#frontmatter-title )
(来源: 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
}
}
Here is my vue
file:这是我的
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>
Now when I run this file, I don't see any adding item ref
logs.现在,当我运行此文件时,我看不到任何
adding item ref
日志。 And on click of a button, I'm logging input
.点击一个按钮,我正在记录
input
。 That has 0 items in the itemRefs
array. itemRefs
数组中有 0 个项目。
What's going wrong?怎么了?
Nuxt 2 is based on Vue 2, which only accepts strings for the ref
attribute . Nuxt 2 基于 Vue 2,它只接受
ref
属性的字符串。 The docs you linked actually refer to new behavior in Vue 3 for ref
, where functions are also accepted . 您链接的文档实际上是指 Vue 3 中
ref
的新行为,其中也接受了函数。
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: Nuxt 2 中的模板 ref 的工作方式与 Vue 2 中的相同,组合 API:当
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>
And setup()
does not provide access to $refs
, as template refs must be explicitly declared as reactive ref
s in Composition API .并且
setup()
不提供对$refs
的访问,因为模板 refs 必须在 Composition ref
中显式声明为反应性 refs 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.