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" >
<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 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 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 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
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)"
v-bind:id="index 1"
>
<option
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"
: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 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 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 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 style="width: 82%">
<label for="stationGroupId">Choose Station Group</label>
<select
@change="changeStationGroupId($event)"
style="width: 100%"
v-bind:id="index 1"
>
<option
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 >
<station-form @save-data="saveData"> </station-form>
</div>
<div >
<table v-if="hasStations" >
<thead>
<!-- <th><a href="">Line ID</a></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>
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.
CodePudding user response：
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.