trigger click event based on count of JSON-CodePudding

I have a b-dropdown in my parent.vue where I select an item and send Props (e.g. 1111, 2222, ... and so on) to my child.vue.

Now I need to check e.g. if my props-value is 1111 how many rows (my definition of rows in this case are 0 and 1 so two rows) are in this JSON-Object and than trigger my click-event based on this count to add the amount of elements to my template.

My question is if this is possible and if yes how to do that?

Thank You!

in my template of child.vue:

<div class="mt-2">
  <b-button @click="addElement" variant="block">Add element</b-button>
</div>

my script:

import json from './json/json.json'

data() {
  return {
    inputs: [{}]
    json: json,
  }
}

methods: {
  addElement() {
    this.inputs.push({});
  },
}

props: ["item"]

my JSON:

[
    {
        "1111": {
            "0": {
                "Number": 1234
            },
            "1": {
                "Number": 4321
            }
        }
    },
    {
        "2222": {
            "0": {
                "Number": 6789
            },
            "1": {
                "Number": 9876
            }
        }
    }
]

CodePudding user response：

You can get object size by Object.keys({"0": {"Number": 1234}, "1": "x"}).length.

Applied to your code:

addElement() {
   if(this.item === '1111'){
     for(let key in this.json[0]['1111'])
         this.inputs.push({});
     }
     //or
     this.addSomething(Object.keys( this.json[0]['1111'] ).length)

   }    
},

CodePudding user response：

You can try with for (variable in object) {statement} and mounted hook:

Vue.component('Child', {
  template: `
    <div class="mt-2">
      <h3>child</h3>
      <p>{{ inputs }}</p>
    </div>
  `,
  props: ["item"],
  data() {
    return {
      inputs: [],
    }
  },
  methods: {
    addElement(el) {
      for(let key in el) {
        this.inputs.push(el[key])
      }
    }
  },
  mounted() {
    this.addElement(this.item)
  }
})

new Vue({
  el: '#demo',
  data() {
    return {
      json : [
        {"1111": {"0": {"Number": 1234}, "1": {"Number": 4321}}},
        {"2222": {"0": {"Number": 6789}, "1": {"Number": 9876}}}
      ]
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <Child :item="json[0]['1111']" />
</div>