按下 ENTER 时从 API 返回特定数据

Question

我试图在按下 Enter 键时返回特定数据。它类似于条形码扫描仪。每次 scann 扫描仪输入密钥代码（keyCode = 13）后，应用程序应遍历每个 json 对象并根据扫描的条形码返回整个 json 对象。

此时我可以获得整个 json...所以因为我不需要整个 json，所以我想首先获得空白表单，然后将条形码放入输入字段并按 ENTER 键后，它应该返回特定对象.. .

是的，这是一项复杂的任务。

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 示例：

[
    {
        "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

使用表单提交处理程序

正如我们在评论中讨论的：是的，您不能将

barcodeSearch

作为方法调用，它是一个计算值。但为什么不为组件创建一个表单处理程序呢？

让我们添加一个表单提交处理程序。您只需更改该提交方法中的

this.barcodeSearch

，而不将其绑定到输入。这样，

barcodeSearch

唯一更新的时间是提交表单时（按 Enter、单击搜索按钮、在移动设备上单击“确定”等）。

因此，请先从表单中删除

v-bind="barcodeSearch"

。

为表单添加提交方法：

methods: {
  submitForm() {
    this.barcodeSearch = this.$refs.searchForm.barcode;
  }
}

然后向表单添加一个

submit

处理程序：

...
<form @submit.prevent="submitForm" ref="searchForm">
...

现在计算值只会在提交表单时改变。