Return specific data from API when ENTER is pressed - laravel

Question

I'm trying to return a specific data when Enter key is pressed. It's something like a barcodes scanner. After each scann scanner enter key code(keyCode = 13) and then app should go through each json object and return the whole json object depends on the scanned barcode.
At this momment I can get whole json... So as I don't need whole json I would like at first to get blank form and after I put barcode in the input field and press ENTER it sould return the sepcific object...
Yeah kind of a complicated task.
index.vue:
<template>
<div class="row">
<div class="card mx-auto">
<div>
<div class="row">
<div class="card w-auto mx-auto">
<div class="card-header">
<div class="row">
<div class="col">
<h3>{{ id }}</h3>
</div>
</div>
</div>
<div class="card-body">
<form >
<div class="form-row align-items-center">
<div class="col">
<input
type="number"
v-model="barcodeSearch"
name="barcode"
class="form-control"
id="inlineFormInput"
placeholder="Barkodas..."
/>
placeholder="Barkodas...">
</div>
</div>
</form>
<table class="table">
<tbody v-if="items">
<div v-for="item in items" :key="item.PrekesID" class="tItems">
<tr >{{ item.Prekes_Pavad}}</tr>
<hr>
<tr >{{ item.Prekes_Kodas}}</tr>
<hr>
<tr >{{ item.PrekesID}}</tr>
<hr>
<div class="col">
<input type="number" name="ItemsFound" class="form-control" id="inlineFormInput"
placeholder="Faktinis likutis">
</div>
<hr>
<div class="col">
<button type="submit" class="btn btn-primary mb-1">Patvirtinti</button>
</div>
</div>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['id'],
data() {
return {
items: []
};
},
mounted() {
fetch("https:**internal address which return json. Example below.**)
.then((res) => res.json())
.then((data) => (this.items = data))
.catch((err) => console.log("err.message"));
},
},
computed: {
searchedBarcode() {
const value = this.barcodeSearch;
let reactiveArray = this.items.filter(function (item) {
if (item && item.Barkodas) {
return item.Barkodas.indexOf(value) > -1;
}
return false;
});
if (reactiveArray.length > 0) {
return reactiveArray;
} else {
return this.items;
}
},
},
</script>
Json exmple:
[
{
"EilesNumeris": 1,
"EilutesNumeris": 1,
"PrekesID": 521328,
"Prekes_Kodas": "5METP000000084",
"Barkodas": "000000220136",
"Prekes_Pavad": "M6-Zn POVERŽLĖ DIN9021",
},
{
"EilesNumeris": 1,
"EilutesNumeris": 2,
"PrekesID": 68316,
"Prekes_Kodas": "5MST000057",
"Barkodas": "0000010008812",
"Prekes_Pavad": "MEDSRAIGČIAI BLT 6,0x40 grūd.D 1/200",
},
{
"EilesNumeris": 1,
"EilutesNumeris": 3,
"PrekesID": 314849,
"Prekes_Kodas": "5MSGR00023",
"Barkodas": "000003962",
"Prekes_Pavad": "%-4,2x19 SAVISRIEGIS Į MET. BE GRĄŽTELIO (AKCIJA)",
},

Answer 1

Use a form submit handler
As we discussed in the comments: Yes, you cannot call barcodeSearch as a method, it is a computed value. But why not create a form handler for the component?
Let's add a form submit handler. You only change this.barcodeSearch in that submit method and don't bind it to the input. This way the only time barcodeSearch is updated is when the form is submitted (pressing enter, clicking search button, clicking "OK" on mobile, etc.).
So remove v-bind="barcodeSearch" from your form first.
Add a submit method for the form:
methods: {
submitForm() {
this.barcodeSearch = this.$refs.searchForm.barcode;
}
}
Then add a submit handler to the form:
...
<form #submit.prevent="submitForm" ref="searchForm">
...
Now the computed value will only change when submitting the form.