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><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.
