自动填充输入字段答案

【问题标题】：Autofill input fields自动填充输入字段
【发布时间】：2021-11-10 06:17:24
【问题描述】：

我需要关注才能工作。我有一个输入字段（在我的代码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" }
]

【问题讨论】：

目前还不清楚你想帮什么忙。你能举例说明它应该如何工作吗？
我添加了一张图片来展示它应该如何工作 - 希望它会有所帮助！
很好的插图！您能展示一下 json 文件中的数据是如何构成的吗？
也添加了！

标签： vue.js bootstrap-4 vuejs2 bootstrap-vue autofill

【解决方案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>

【讨论】：

【解决方案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>

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

【讨论】：