Ref tag in dom element not work when use it inside a object

Hi, with this code:

<script setup lang="ts">
import { ref } from 'vue';
const input1 = ref(null);
const group = {
  input2: ref(null),
  input3: ref(null),

function main() {
  console.log("input1", input1?.value?.value);
  console.log("input1", group.input3?.value?.value);
  console.log("input3", group.input3?.value?.value);
input1: ${input1?.value?.value}
input2: ${group.input2?.value?.value}
input3: ${group.input3?.value?.value}

  <input ref="input1" type="text" value="1" />
  <input ref="group.input2" type="text" value="2" />
  <input ref="group.input3" type="text" value="3" />
  <button @click="main">click</button>
  <textarea cols="30" rows="6"></textarea>

when you do click, you get input1 in input1.value, but yo don’t get input2 and input3 in group.input2.value and group.input3.value, you get null instead.

Why input1.value works but group.input2.value and group.input3.value are always null?

How can I defined a one single object with one attribute for each input?
What I am really want to achieve is a single object that represent all inputs in a form.


I believe the automagic assignment between ref attribute and the variable only works if the attribute value contains a valid variable name. This is why input1 works, whereas group.input2 is not a valid variable name; it’s an object notation.

You could try using a function :ref for the attribute
:ref="(elt) => { group[] = elt }"
and populate that group variable with all inputs.

This is explained in the Guide

Hope this helps.

Pretty sure if you use a reactive object you can achieve what you want.

I have tried with:

const group = reactive({
  input2: null,
  input3: null

and I don’t see any different.