vue 类似超市扫码枪连续扫码得知价格 实时更新数据

<template>
  <div class="pt-30">
    <a-spin :spinning="isLoading">
      <a-form :form="menuForm">
        <a-form-item label="货品编号" required :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-model="formItem.item_number" placeholder="请输入货品编号" @pressEnter="pressEnterFn" />
        </a-form-item>
        <a-form-item label="平均估价" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <div>{{ formItem.average_price }}</div>
        </a-form-item>
        <a-form-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <img :src="formItem.cover" style="width: 25%" />
        </a-form-item>
      </a-form>
    </a-spin>
  </div>
</template>

<script>
import { itemsDetail } from '@/api/warehouse.js';
export default {
  inject: ['reload'],
  data() {
    return {
      id: this.$route.query.id,
      isLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 2 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      menuForm: this.$form.createForm(this),
      formItem: {},
      listData: [],
    };
  },
  methods: {
    async pressEnterFn(e) {
      this.formItem.item_number = e.target.value;
      const res = await itemsDetail({ item_number: this.formItem.item_number });
      this.formItem.average_price = res.data.result.average_price;
      this.formItem.cover = res.data.result.cover;

      if (res.data.code == 700) {
        this.formItem.item_number = '';
      }
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="scss" scoped>
.text {
  font-size: 20px;
  margin-left: 20px;
  margin-bottom: 30px;
}
</style>