What is the correct way to retrieve data from 2 or more identical components?

What is the correct way to retrieve data from 2 or more identical components?

Evening. I've created a button which adds a component that has an input field inside. I might need to press that button few times so there would be 2-3 input fields that appear. Whenever I type the text I would like to send a request from the parent component but I don't know how to retrieve the data from every child component that has been created. Is this the time to start using vuex (never used it)?

Evening. I've created a button which adds a component that has an input field inside. I might need to press that button few times so there would be 2-3 input fields that appear. Whenever I type the text I would like to send a request from the parent component but I don't know how to retrieve the data from every child component that has been created. Is this the time to start using vuex (never used it)?

ParentComponent.vue

<template> <div> <button class="btn btn-success" @click="addStep">Add step</button> <div v-for="i in count"> <recipe-step v-bind:step-number="i"></recipe-step> </div> </div> </template>

<script> export default { data() { return { count: 0 } }, methods: { addStep() { this.count += 1; } } } </script>

StepComponent.vue

<template> <div> <div class="from-group"> <label for="step-input"></label> <input id="step-input" v-model="text" type="text"> </div> </div> </template>

<script> export default { props: { stepNumber: { type: Number, required: true } }, data() { return { step: this.stepNumber, text: "" } } } </script>


Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

10 Best Vue Icon Component For Your Vue.js App

In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

Collection of 10 Vue Markdown Component for Vue.js App in 2020

Markdown is a way to style text on the web. The 10 Vue markdown components below will give you a clear view.

Collection of 15 Vue Input Component for Your Vue.js App

Vue input component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. In this article I will share 15 Vue input components to you.