Vue项目按下回车键匹配条形码返回指定API数据功能实现咨询

核心修改点 #

• 新增变量存储全量商品数据、扫描输入值、匹配结果，初始状态匹配结果为空，不会渲染商品信息
• 监听输入框的回车事件（对应扫描仪扫描完成后的触发动作），回车后才执行条码匹配逻辑
• 修正原代码的语法错误、模板结构错误，避免异常渲染
• 支持完全匹配/模糊匹配两种模式，可根据业务需求调整

修改后的完整代码 #

<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">
                    <!-- 绑定回车事件，建议改成text类型避免开头0丢失，需要限制数字可额外加校验 -->
                    <input
                      type="text"
                      v-model="barcodeSearch"
                      name="barcode"
                      class="form-control"
                      id="inlineFormInput"
                      placeholder="Barkodas..."
                      @keyup.enter="handleSearch"
                    />
                  </div>
                </div>
              </form>
              <table class="table">
                <!-- 只有匹配到结果才渲染 -->
                <tbody v-if="matchedItems.length > 0">
                  <tr v-for="item in matchedItems" :key="item.PrekesID" class="tItems">
                    <td>
                      <p>{{ item.Prekes_Pavad}}</p>
                      <hr>
                      <p>{{ item.Prekes_Kodas}}</p>
                      <hr>
                      <p>{{ item.PrekesID}}</p>
                      <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>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['id'],
  data() {
    return {
      // 存储后端返回的全量商品数据
      allItems: [],
      // 扫描输入的条码值
      barcodeSearch: '',
      // 匹配到的结果，初始为空不渲染
      matchedItems: []
    };
  },
  mounted() {
    fetch("https:**internal address which return json. Example below.**")
      .then((res) => res.json())
      .then((data) => (this.allItems = data))
      .catch((err) => console.log(err.message));
  },
  methods: {
    handleSearch() {
      const searchVal = this.barcodeSearch.trim()
      if (!searchVal) {
        this.matchedItems = []
        return
      }
      // 匹配逻辑，需要完全匹配就改成 item.Barkodas === searchVal
      this.matchedItems = this.allItems.filter(item => {
        return item && item.Barkodas && item.Barkodas.indexOf(searchVal) > -1
      })
      // 匹配完成后可清空输入框，方便下次扫描，不需要可以注释
      this.barcodeSearch = ''
    }
  }
}
</script>

逻辑说明 #

1. 页面初始化时只会请求接口把全量商品数据存在allItems变量中，此时matchedItems为空，商品列表区域不会渲染
2. 扫描枪扫描完成后会自动触发输入框的回车事件，执行handleSearch匹配逻辑
3. 匹配到对应条码的商品后，将结果赋值给matchedItems，页面自动渲染对应商品的信息
4. 如果需要匹配多条条码结果直接保留现有逻辑，如果只需要匹配第一条结果，可在filter后取数组第一项赋值即可

内容的提问来源于stack exchange，提问作者Artūras Yapaz