trigger click event based on count of JSON

Question

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:


  Add element

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
            }
        }
    }
]

user_14372759 · Answer

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)

   }    
},

user_11989189 · Answer

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

Vue.component('Child', {
  template: `
    
      child
      {{ inputs }}
    
  `,
  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

trigger click event based on count of JSON

2 Answers