检查对象大小/ BootstrapVue 的长度

Posted 2023-02-16

【中文标题】检查对象大小/ BootstrapVue 的长度

【英文标题】：Check length of Object size / BootstrapVue

【发布时间】：2021-11-14 19:06:00

【问题描述】：

我已经更新了我的代码 - 我认为之前还不够清晰。

我尝试输入我的号码并在其他两个字段中获取我的输入但只有当它正确时，否则我的输入字段应该包含信息“假号码”，但它不起作用..

当我输入 3 个数字并且它们在我的 json 文件中时，它会给出 console.log “不在文件中” - 但它是..

希望现在有人可以帮助我..

<template>
<div>
  <div class='inputArea mt-2' v-for='(element, index) in inputs' :key='index'>
    <b-button v-b-toggle="'newElement'+index" variant='secondary btn-block'>Element index+1</b-button>

    <b-collapse :id="'newElement'+index">
      <div class='m-2 mt-3'>
        <table class='table table-striped mt-2'>
          <tbody>
            <tr>
              <div class='row'>
                <div class='col-md-6 m-1'>
                  <div class='mt-2'>Input Number</div>
                  <b-form-input v-model="element.Number" @input="searchelementInformations(element.Number)"></b-form-input>
                </div>
              </div>
              <div class='row'>
                <div class='col-md-5 ml-1 mr-1'>
                  <div class='mt-2'>Autofill 1</div>
                  <b-form-input :value="element.Autofill1" ></b-form-input>
                </div>
                <div class='col-md-5 ml-1 mr-1'>
                  <div class='mt-2'>Autofill 2</div>
                  <b-form-input :value="element.Autofill2"></b-form-input>
                </div>

              </div>
            </tr>
          </tbody>
        </table>
      </div>
    </b-collapse>
    </div>

    <div class='mt-4 mb-5 ml-3 mr-3'>
      <b-button @click='addelement' variant='block' type='button'>Add Element</b-button>
    </div>

  </div>
</template>


<script>

export default 
  methods: 
    addelement() 
      this.inputs.push (
      );
    , 

    searchelementInformations(inputNumber) 

      var size = Object.keys(inputNumber).length;
      console.log(size);

      this.jsonAutofill.forEach(element => 
        if ((size === 3) && (+element.Number === +inputNumber)) 
          for(const key of Object.keys(element)) 
            inputNumber = element[key];
            console.log(key);
            console.log(inputNumber);
          
        
        else if (size !== 3) 
          console.log("Not correct length");
        
        else if ((size === 3) && (+element.Number !== +inputNumber))
          console.log("Not in file")
        
      );       
    , 
  ,

  data() 
      return 
        inputs:[],
        Artikelnummer: [],
        jsonAutofill: [
           "Number": 123, "Autofill1": "Test1", "Autofill2": "Hello",
           "Number": 321, "Autofill1": "Test2", "Autofill2": "Goodbye",
        ],
      
  
;
</script>


<style scoped>
</style>

【参考方案1】：

我会关注反应性数据，like this：

<script>
export default 
  data () 
    return 
      number: 0,
      message: ""
    
  ,
  watch: 
    "number"()
      if (this.number.length == 5) 
        this.message = "Do this"
      
      else 
        this.message = "Do that"
      
    
  

</script>

<template>
  <input v-model="number">
  <div> message </div>
</template>

【讨论】：

嘿，我认为我的意思还不够清楚。我已经为此复制了完整的代码 - 希望现在更好地理解我需要什么。感谢您的帮助！

【参考方案2】：

这就是答案。我需要在我的 Object.keys 中引用“数字”而不是得到长度。

var size = Object.keys(inputNumber.Number).length;
      console.log(size);