How to read child component values from a parent method -- vue.js - vue.js

Question

I have a dynamic list of custom components which are input fields. From my parent vue ,when a button is clicked, how can I write a method that will loop through all the components in my list to get their values?
input-field.vue
<template>
<div>
<input
type="text"
:name="name"
:id="id"
#input="valueChanged"
v-model="val"
/>
</div>
</template>
app.vue
<div>
<ul>
<ul v-for="item in items" :key="item.id">
<my-input :name="item.name" :id="item.id" #input="onChange" />
</ul>
</ul>
<button>READ FIELDS</button>
</div>
</template>
<script>
import myInput from "./components/input-field.vue";
export default {
name: "App",
data() {
return {
items: [
{ id: "3", name: "test3" },
{ id: "4", name: "test4" },
{ id: "5", name: "test5" },
],
};
},
components: {
myInput
},
methods: {
//on button click function here
//how can I get the data from the my-input components
}
};
</script>

Answer 1

There is no need to read the values. Bind them like this: Playground
Read and understand what I have done, do not copy-paste. I have changed some of your code eg. imports
input-field.vue
<template>
{{name}}
<input type="text"
:name="name"
:id="id"
:value="modelValue"
#input="$emit('update:modelValue', $event.target.value)" />
</template>
<script>
export default {
props: ["modelValue", "id", "name"],
emits: ["update:modelValue"]
}
</script>
app.vue
<template>
<div v-for="item in items" :key="item.id">
<my-input :name="item.name" :id="item.id" v-model="item.value"></my-input>
</div>
<br />
<b>Values in App.vue</b>
<table border=1>
<tr v-for="item in items" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.value}}</td>
</tr>
</table>
</template>
<script>
import myInput from "./input-field.vue";
export default {
name: "App",
data() {
return {
items: [
{ id: "3", name: "test3", value: "test input" },
{ id: "4", name: "test4", value: "" },
{ id: "5", name: "test5", value: "" },
],
};
},
components: {
myInput
},
};
</script>