自动填充输入字段

Question

我需要跟随才能工作。我有一个输入字段 （在我的代码 number1） 并且我需要自动填充 （ 不自动完成 ） 其他输入字段 （在我的代码中 autofill1 + autofill2）.

我正在使用 Bootstrap Vue（Bootstrap 4.6 和 Vue.js 2）。

这是我的代码：

<template>
  <div class="m-2 mt-3">
    <table class="table table-striped mt-2">
      <tbody>
        <h5 class="ml-1">Informations</h5>
        <tr>
          <div class="row">
            <div class="col-md-6 m-1">
              <div class="mt-2">number1</div>
              <b-form-input class="form-control" placeholder="1234567" id="number1" />
            </div>
          </div>
          <div class="row">
            <div class="col-md-5 ml-1 mr-1">
              <div class="mt-2">autofill1</div>
              <b-form-select id="autofill1"> </b-form-select>
            </div>

            <div class="col-md-5 ml-1 mr-1">
              <div class="mt-2">autofill2</div>
              <b-form-select id="autofill2"> </b-form-select>
            </div>
            <div class="row">
            <div class="col-md-3 mt-2 ml-1">
              <b-button variant="success" type="submit"><b-icon icon="check-circle-fill"></b-icon> Save Changes</b-button>
            </div>
            </div>
          </div>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
  };
</script>

<style scoped>
</style>

所以我的目标是加载一些数据 （第一个猜测是一个 json 文件） 到我的脚本中，然后我写了一个匹配的数字 （也可能是文本） 在输入字段中 number1 其他两个字段将自动填充。

在此先感谢您的帮助！

结构json数据：

[
  { "number": 1234567, "autofill1": "Hello", "autofill2": "Goodbye" },
  { "number": 9876543, "autofill1": "Ciao", "autofill2": "Arrivederci" },
  { "number": 1346795, "autofill1": "Hallo", "autofill2": "Tschuess" }
]

Answer 1

像这样的东西会起作用：Example

<template>
  <div>
    <input type="number" placeholder="1234567" v-model.number="number1" />
    <input type="text" :value="getAutofill.autofill1" />
    <input type="text" :value="getAutofill.autofill2" />
  </div>
</template>

<script>
export default {
    computed: {
      getAutofill(){
        if (!this.data.find(item => item.number == this.number1)) return ["",""]
        return this.data.find(item => item.number == this.number1)
      }
    },
    data() {
      return {
        number1: undefined,
        data: [
          { "number": 1234567, "autofill1": "Hello", "autofill2": "Goodbye" },
          { "number": 9876543, "autofill1": "Ciao", "autofill2": "Arrivederci" },
          { "number": 1346795, "autofill1": "Hallo", "autofill2": "Tschuess" }
        ]
      }
    }
};
</script>

Answer 2

您需要向数据添加一些内容，然后观察变量 number1 的变化...

<template>
    <div class="m-2 mt-3">
      <table class="table table-striped mt-2">
        <tbody>
          <h5 class="ml-1">Informations</h5>
          <tr>
            <div class="row">
              <div class="col-md-6 m-1">
                <div class="mt-2">number1</div>
                <b-form-input class="form-control" placeholder="1234567" id="number1" v-model="number1" />
              </div>
            </div>
            <div class="row">
              <div class="col-md-5 ml-1 mr-1">
                <div class="mt-2">autofill1</div>
                <b-form-input class="form-control" id="autofill1" v-model="autofill1" />
              </div>
  
              <div class="col-md-5 ml-1 mr-1">
                <div class="mt-2">autofill2</div>
                <b-form-input class="form-control" id="autofill2" v-model="autofill2" />
              </div>
              <div class="row">
              <div class="col-md-3 mt-2 ml-1">
                <b-button variant="success" type="submit"><b-icon icon="check-circle-fill"></b-icon> Save Changes</b-button>
              </div>
              </div>
            </div>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script>
    export default {
        data(){
            return {
                number1: "",
                autofill1: "",
                autofill2: "",
                jsonDATA: {...}
            }
        },
        methods: {
            findData(key) {
                for(let i=0; i < this.jsonDATA.length; i++){
                    if(this.jsonDATA[i]['number'] === key) return element[i]
                }
                // add somthing when no data in array...
            }
        },
        watch: {
            number1(){
                try {
                    let tmp = this.findData(this.number1)
                    this.autofill1 = tmp['autofill1']
                    this.autofill2 = tmp['autofill2']
                }
            }
        }
    };
  </script>
  
  <style scoped>
  </style>

我还没有测试过，但这应该可以工作...这还不完整，您需要添加一些行为，当找不到数据时该怎么做...

自动填充输入字段

Autofill input fields

autofill

vue.js

bootstrap-4

vuejs2

bootstrap-vue