ref 相关问题

Vue 3：将引用值绑定到对象属性

我遇到了一个问题，我试图使用新的组合 API 将对象属性绑定到 Vue 中的引用。我希望模板在设置引用后使用新值重新渲染

如何在第一个组件加载时获取加载的引用数组

我在更新 vue 3 项目中的反应式对象时遇到一些问题，我正在创建一个 google.maps.marker.AdvancedMarkerElement 数组，我正在创建这样的数组 -> 本地化.forEach((

PowerReadFriendlyName 报告错误的缓冲区长度

我正在制作一个 C# 程序，通过 PInvoking Win32 函数 PowerReadFriendlyName 从电源管理方案的 GUID 中检索电源管理方案的名称。然而，该函数似乎报告错误的缓冲区

ref 在 HTMLAttributes 中不可用<HTMLDivElement>

我有一个可重用的包装组件，如下所示： 从“react”导入{FC，HTMLAttributes}； const 包装器： FC> = ({ 孩子们， 班级名称...

React 上有 2 个参考文献的问题

我有 1 个来自 useForm 的参考 - 注册 const {注册，错误} = useForm({ reValidateMode：“onChange”， 模式：“onChange”， 原生验证：假 }); <

如何检查正在更新的表中的 ref 列的属性 - Oracle

我对 Oracle 很陌生，并且在 REF 方面遇到困难。 我有一个具有以下结构的员工类型： 创建类型 person_type 作为对象（ 地址at_address_type， 名称 at_name_type, 酸碱度...

如何在 Vue 3 的自定义组件中同时使用 ref 和 v -for ？

我有字段验证，在提交期间我需要关注有错误的第一个输入字段 从我的父组件 CustomForm 我无法访问 CustomInput 中的子组件输入 我有字段验证，在提交期间我需要关注有错误的第一个输入字段 从我的父组件 CustomForm 我无法访问 CustomInput 中的子组件输入 <script setup lang="ts"> import CustomForm from '@/components/CustomForm.vue' </script> <template> <CustomForm /> </template> <style scoped lang="scss"> </style> <script setup lang="ts"> import CustomInput from '@/components/CustomInput.vue' import { useForm } from '@/hooks/useForm' const formData = [ { name: 'title', label: 'title', required: true, value: '', isValid: false, errorMessages: [] }, { name: 'name', label: 'name', required: true, type: 'textarea', value: '', isValid: false, errorMessages: [] } ] const { isFormValid, fieldsForm, submit } = useForm(formData) const submitForm = () => { submit() if (isFormValid.value) { console.log('submit') console.log(fieldsForm) } } </script> <template> <form @submit.prevent="submitForm"> <CustomInput v-for="data in fieldsForm" :key="data.name" ref="customInputRef" :field-data="data" v-model="data.value" v-model:error="data.errorMessages" v-model:isValid="data.isValid" /> <button type="submit">Отправить</button> </form> </template> <style scoped lang="scss"> </style> <script setup lang="ts"> import { computed, ref, watchEffect } from 'vue' import { v4 as uuidv4 } from 'uuid' import type { IFieldProps } from '@/types/Field' import { useInputValidator } from '@/hooks/useInputValidator' const props = withDefaults(defineProps<IFieldProps>(), { placeholder: (props: IFieldProps) => `Input ${props.fieldData.name.toUpperCase()} please` }) const emit = defineEmits([ 'update:modelValue', 'update:error', 'update:isValid', ]) const r= ref(null) const inputComponent = ref(props.fieldData.type !== 'textarea' ? 'input' : 'textarea') const inputId = computed(() => `input-${uuidv4()}`) const { isBlurred,field, blurAction,inputAction, errors, isValid } = useInputValidator(props.fieldData) const inputHandler = (e: Event) => { const v = (e.target as HTMLInputElement).value emit('update:modelValue', v) inputAction() emit('update:error', errors) } const blurHandler = (e: Event) => { blurAction() emit('update:error', errors) emit('update:isValid', isValid) } </script> <template> <div class="field"> <label class="field__label" :for="inputId"> {{ field.label }} </label> <div class="field__inner"> <div class="field-icon" v-if="$slots.icon"> <slot name="icon"></slot> </div> <component :is="inputComponent" :name="field.name" ref="r" class="field__input" :class="{ valid:field.isValid, error:field.errorMessages.length, }" :id="inputId" :value="field.value" @input="inputHandler" @blur="blurHandler" :placeholder="props.placeholder" /> <template v-if="field.errorMessages"> <p class="field__error" v-for="(error,index) in field.errorMessages" :key="index"> {{ error }} </p> </template> </div> </div> </template> import type { Field } from '@/types/Field' import { computed, ref } from 'vue' import { validateField } from '@/helpers/validateField' export const useForm = (formFields: Field[]) => { const fieldsForm = ref(formFields) const isFormValid = computed(() => fieldsForm.value.every(field => field.isValid) ) const updateValidity = (fieldName: string, errors: string[]) => { const field = fieldsForm.value.find(data => data.name === fieldName) if (field) { field.errorMessages = errors } } const checkFields = () => { fieldsForm.value.forEach(field => { let err: string[] = [] if (field.required) { if (!isFormValid.value && !field.errorMessages.length) { err = validateField(field.name, field.value) updateValidity(field.name, err) } } }) } const submit = () => { checkFields() } return { submit, isFormValid, fieldsForm } } import { computed, ref, watchEffect } from 'vue' import type { Field } from '@/types/Field' import { validateField } from '@/helpers/validateField' export const useInputValidator = (fieldForm: Field) => { const field = ref<Field>(fieldForm) const errors = ref(field.value.errorMessages) const isBlurred = ref(false) const isValid = computed(() => { return !errors.value.length }) watchEffect(()=>{ if(field.value.errorMessages.length){ isBlurred.value= true errors.value= field.value.errorMessages } }) const inputAction = () => { if (isBlurred.value) { errors.value = validateField(field.value.name, field.value.value) } } const blurAction = () => { if (isBlurred.value) return errors.value = validateField(field.value.name, field.value.value) isBlurred.value =true } return { field, isValid, errors, blurAction, inputAction, isBlurred } } 我验证了这些字段。但重点关注的功能仍然存在。我想通过钩子访问表单字段 如何更改主数组的数据，例如isValid？ ...................................................... ...................................................... .. 首先，要根据文档应用v-for内的引用，请使用数组或函数。 其次，在子组件中，使用 defineExpose() 绑定到所需元素组件引用。 我创建了简单的示例： /* App.vue */ <script setup> import { ref } from 'vue'; import CustomInput from './CustomInput.vue'; const formData = ref({ firstName: '', lastName: '', }) const inputs = ref({}); const focus = (key) => { inputs.value[key].input.focus(); } </script> <template> <div class="inputs"> <CustomInput v-for="(value, key) in formData" v-model="formData[key]" :ref="el => inputs[key] = el" :label="key" ></CustomInput> </div> <br> <div class="btns"> <button v-for="(value, key) in inputs" @click="focus(key)" > Focus to {{ key }} </button> </div> <br> <pre>{{ formData }}</pre> </template> <style> .inputs { display: grid; gap: 4px; } .btns { display: flex; gap: 8px; } </style> /* CustomInput.vue */ <script setup> import { ref } from 'vue'; defineProps({ label: String, }) const model = defineModel(); const input = ref(); defineExpose({ input }); </script> <template> <label> {{ label }}: <br> <input ref="input" v-model="model" > </label> </template>

从下拉列表中选择时使用参考滚动到做出反应

好吧，我正在尝试创建一个下拉菜单，当选择一个项目时，页面应该滚动到特定部分（参考）。 我有几个具有相同引用的 div（因为我有超过 30 个 div 需要......

ref 为空 Typescript + NextJS

我需要从父组件内的自定义子组件调用方法。 但不幸的是，子组件（称为 CanvasUI）的引用始终为空。我不明白为什么...

我们如何让一个单词指代乳胶中的某个部分或图片之类的东西？

我们如何让一个单词指代乳胶中的某个部分或图片之类的东西？ 我知道如何引用某事物 ef{} 但当我们使用它时，我们会看到部分或表格或图片的编号...

源生成器库可以针对的最大 C# 版本是什么？

源生成器应以 .NET Standard 2.0 为目标。这是支持 .NET Framework 的最后一个 .NET Standard 版本。最新 .NET Framework 版本中的默认 C# 版本是 C# 7.3。 假设一个

当我将引用放入 Box/div 时，UI 会移动

我有以下代码： 它看起来像这样： 我需要添加一个 div 并在其中引用： 如果我这样做，所有用户界面都会向上移动。看这张图： 我意识到只有当我添加...

如何使用useFormik默认选中复选框？

我有这些组件，并且子组件中有 12 个复选框。我想在组件加载时默认检查它们。我不能那样做。我不能使用checked='true'作为...的属性

C#：如何将可选引用返回到结构

在 C# 中，如何编写一个可能返回或不返回结构体引用的函数？ 我基本上想要的是返回类型 Nullable 但编译器抱怨 ref 是

Vue.js：如何获取插槽的组件实例列表

我想访问插槽组件列表的 vue 实例。具体来说，我需要访问槽组件的 key 或 id，以便我可以在 beforeUpdate 和 Updated 中保留组件的状态

使用Python编码的行梯形矩阵，无需使用任何内置函数

我正在尝试使用Python编写\矩阵的行梯形形式的代码，而不使用任何内置函数。但我在最后一列中收到错误。 A=[[1,2,3],[4,5,6],[7,8,9]] j=0;k=0 优先...

访问 React Fragment 的子级

假设我有一个组件，它应该包装一个子组件，并使用 IntersectionObserver 来监视子组件何时出现在屏幕上，然后将其淡入。 我可以实现这样的事情：

如何在div之外切换react-speech组件？

从 'react' 导入 React, { useState, useRef }; 从“react-speech”导入语音； 函数 MyComponent() { const [currentPlayingId, setCurrentPlayingId] = useState(null); const [正在播放，

Vue 3. 如果我愿意，我可以在 <template> 部分使用 ref() 的“.value”属性吗？

TLDR：我希望 .value 在模板部分中起作用，但事实并非如此。 无论我看什么，甚至在官方 Vue 3 文档中，我都被告知（释义）“我不必使用‘.value’”，当...

将指针或引用传递给对象的构造函数

对 C++ 相当陌生，并且在引用与指针方面存在问题。下面的代码是一个简单电机的类并工作。我想在构造函数中传递引脚扩展器，但似乎无法...