[Vue warn]: Extraneous non-props attributes (id) were passed to component but could not be automatically inherited because component renders fragment - vue.js

Question

I learn VUE.JS and I got this two errors while I tried to get data values and make Edit/Update functionality.
I managed to get all data but I got warning:
[Vue warn]: Extraneous non-emits event listeners (editedStation) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.
at <StationItem key=121 id=121 line="test" ... >
at <StationList onVnodeUnmounted=fn<onVnodeUnmounted>
[Vue warn]: Extraneous non-props attributes (id) were passed to component but could not be automatically inherited because component renders fragment
in console after sending the data from the row into form.
Child component:
<template>
<tr>
<td style="padding: 10px">{{ line }}</td>
<td style="padding: 10px">{{ physLine }}</td>
<td style="padding: 10px">{{ wsType }}</td>
<td style="padding: 10px">{{ ws }}</td>
<td style="padding: 10px">{{ name }}</td>
<td style="padding: 10px">{{ isValid }}</td>
<td style="padding: 10px">{{ stationGroupId }}</td>
<td style="padding: 10px">{{ order }}</td>
<td style="padding: 10px" class="actions">
<button #click="editStation($event)" v-bind:id="stationId">
{{ editIsClicked ? "Done" : "Edit" }}
</button>
</td>
</tr>
<tr v-if="editIsClicked" style="background-color: #ffda99">
<td colspan="3" style="padding: 30px 0px 30px 30px">
<div class="form-control" style="margin-bottom: 10px; width: 80%">
<label for="line" style="display: block; text-align: left; font-size: 14px"
>Line Number</label
>
<input
type="text"
:value="station.lineNum"
style="width: 90%; display: block; text-align: left"
/>
</div>
<div class="form-control" style="margin-bottom: 10px; width: 80%">
<label
for="physLine"
style="width: 90%; display: block; text-align: left; font-size: 14px"
>
Phys line
</label>
<input
type="text"
:value="station.physLine"
style="width: 90%; display: block; text-align: left"
/>
</div>
<div class="form-control" style="margin-bottom: 10px; width: 80%">
<label
for="wsType"
style="width: 90%; display: block; text-align: left; font-size: 14px"
>WS Type</label
>
<input
type="text"
:value="station.wsType"
style="width: 90%; display: block; text-align: left"
/>
</div>
<div
class="form-control"
style="width: 50%; margin-bottom: 10px; border: 1px solid #b5b5b5"
>
<label
for="isValid"
style="width: 40%; display: block; text-align: left; font-size: 14px"
>is Valid</label
>
<input type="checkbox" :value="station.isValid" style="margin-left: -350px" />
</div>
<p v-if="!isValid.isValid">{{ errorMessage }}</p>
<tr v-for="(btn, index) in filteredButtonList" v-bind:key="btn.id">
<td>{{ btn.buttonListName }}</td>
<td>{{ btn.buttonListDesc }}</td>
<td>
<select
#change="onQuidoIdChange($event)"
class="form-select form-control required"
v-bind:id="index + 1"
>
<option
class="quido-id"
v-for="entry in selectedQuidoId"
:value="entry.quidoId"
selected
:key="entry.quidoId"
disabled
hidden
>
{{ entry.quidoName }}
</option>
<option
v-for="quido in filteredQuidosList"
:value="quido.quidoId"
v-bind:key="quido.quidoId"
v-bind:id="quido.quidoId"
>
{{ quido.quidoName }}
</option>
</select>
</td>
<td>
<tr>
<td>
<input
#change="onInputChange($event)"
type="number"
class="input-custom"
:placeholder="`Input ${index + 1}`"
v-bind:id="index + 1"
:value="station.stationButtons[index].input"
/>
</td>
</tr>
</td>
</tr>
</td>
<td colspan="6" style="padding-bottom: 250px:">
<div class="form-control" style="margin-bottom: 10px">
<label style="display: block; text-align: left; font-size: 14px" for="wsName"
>WS Name</label
>
<input
type="text"
:value="station.wsName"
style="width: 80%; display: block; text-align: left"
/>
</div>
<div class="form-control" style="margin-bottom: 10px">
<label style="display: block; text-align: left; font-size: 14px" for="wsName"
>Position Name</label
>
<input
type="text"
:value="station.posName"
style="width: 80%; display: block; text-align: left"
/>
</div>
<div class="form-control" style="margin-bottom: 10px">
<label
style="width: 80%; display: block; text-align: left; font-size: 14px"
for="wsName"
>Order</label
>
<input
type="text"
:value="station.order"
style="width: 80%; display: block; text-align: left"
/>
</div>
<div class="form-control" style="width: 82%">
<label for="stationGroupId">Choose Station Group</label>
<select
#change="changeStationGroupId($event)"
style="width: 100%"
v-bind:id="index + 1"
class="required"
>
<option
class="stgr-id"
v-for="entry in selectedStationGroupId"
:value="entry.stationGroupId"
selected
:key="entry.stationGroupId"
disabled
hidden
>
{{ entry.stationGroupsName }}
</option>
<option
v-for="stGrId in filteredStationGroups"
:value="stGrId.stationGroupsId"
v-bind:key="stGrId.stationGroupsId"
>
{{ stGrId.stationGroupsName }}
</option>
</select>
</div>
</td>
</tr>
</template>
Parent component:
<template>
<div class="section-global">
<station-form #save-data="saveData"> </station-form>
</div>
<div class="section-global">
<table v-if="hasStations" class="render-list-table">
<thead>
<!-- <th>Line ID</th> -->
<th>Line num</th>
<th>Phys Line</th>
<th>WS Type</th>
<th>WS Name</th>
<th>Pos. name</th>
<th>isValid</th>
<th>Station Group ID</th>
<th>Order</th>
<th>Actions</th>
</thead>
<tbody>
<station-item
v-for="station in filteredStations"
:key="station.stationId"
:id="station.stationId"
:station-id="station.stationId"
:line="station.lineNum"
:phys-line="station.physLine"
:ws-type="station.wsType"
:ws="station.wsName"
:name="station.posName"
:order="station.order"
:is-valid="station.isValid"
:stationGroupId="station.stationGroupId"
#editedStation="editFormData($event)"
>
</station-item>
</tbody>
</table>
<h1 v-else>NO STATIONS FOUND</h1>
</div>
</template>
<script>
import StationItem from "#/components/stations/StationItem.vue";
import StationForm from "#/components/stations/StationForm.vue";
export default {
data() {
return {
editedDataToBeSendToFormInputs: [],
};
},
components: {
StationItem,
StationForm,
},
computed: {
filteredStations() {
return this.$store.getters["stations/stations"];
},
hasStations() {
return this.$store.getters["stations/hasStations"];
},
probaFiltered() {
return this.$store.getters["stations/probaGetter"];
},
},
created() {
this.loadStations();
this.loadProba();
},
methods: {
editFormData(event) {
const dataToBeEdited = event;
// this.editedDataToBeSendToFormInputs.push(dataToBeEdited);
const test = this.probaFiltered;
test.push(dataToBeEdited);
this.loadProba();
},
saveData(data) {
this.$store.dispatch("stations/addStation", data);
},
loadStations() {
this.$store.dispatch("stations/loadStationList");
}
},
};
</script>
Problem visualisation.
Can someone help me get rid of this browser warnings?
I tried a couple of solutions from StackOverflow but without success. I wrapped the t-row in div tag and I got another issue with the render, I cannot render div as t-row in the next component where I need that data.
Thanks in advance.
After failing to send data via EventBus into Create section (A1) i decided to make form inside the component that I render (B2) and emit the data into B1 component.
I try to send the data from Child to Parent (from B2 to B1) but I get the error above. App works but I hate errors.

Answer 1

Check this the first warning.
And declare your component editedStation event with the emits option inside the component.
It seems for me, that you are using Vue 3. If so, then please remove the Vue 2 tag.